Questions tagged «angular»

我想我有基本概念，但是有些模糊之处 因此，通常这就是我使用可观察的方式： observable.subscribe(x => { }) 如果要过滤数据，可以使用以下方法： import { first, last, map, reduce, find, skipWhile } from 'rxjs/operators'; observable.pipe( map(x => {return x}), first() ).subscribe(x => { }) 我也可以这样做： import 'rxjs/add/operator/map'; import 'rxjs/add/operator/first'; observable.map(x => {return x}).first().subscribe(x => { }) 所以我的问题是： 有什么不同？ 如果没有区别，为什么功能管道存在？ 为什么这些功能需要不同的导入？

103 angular  rxjs  rxjs5 

我正在尝试使用ng-contentAngular 6中的多个组件来构建自定义组件，但这不起作用，我也不知道为什么。 这是我的组件代码： <div class="header-css-class"> <ng-content select="#header"></ng-content> </div> <div class="body-css-class"> <ng-content select="#body"></ng-content> </div> 我试图在另一个地方使用此组件，并在body和的标头select中呈现两个不同的HTML代码ng-content，如下所示： <div #header>This should be rendered in header selection of ng-content</div> <div #body>This should be rendered in body selection of ng-content</div> 但是组件使空白。 你们知道我可能做错了什么，还是在同一组件中呈现两个不同部分的最佳方法是什么？ 谢谢！

103 angular  angular6  angular-components  ng-content 

这个问题的答案是社区的努力。编辑现有答案以改善此职位。它目前不接受新的答案或互动。 使用ng --version我得到： @角度/ cli：1.0.0 这不是可用的最新版本。 由于我的系统上全局安装了Angular CLI，因此为了进行升级，我尝试了以下操作： npm update angular-cli -g 但是它不起作用，因为它保持为1.0.0版本。

102 angular  angular-cli 

如何使用ngStyle添加背景图片？我的代码不起作用： this.photo = 'http://dl27.fotosklad.org.ua/20121020/6d0d7b1596285466e8bb06114a88c903.jpg'; <div [ngStyle]="{'background-image': url(' + photo + ')}"></div>

102 javascript  html  css  angular 

我正在开发一个具有许多角色的应用程序，我需要使用这些功能来根据这些角色来阻止对应用程序各部分的导航。我意识到我可以为每个角色创建单独的后卫类，但宁愿拥有一个可以以某种方式将参数传递给它的类。换句话说，我希望能够执行以下操作： { path: 'super-user-stuff', component: SuperUserStuffComponent, canActivate: [RoleGuard.forRole('superUser')] } 但是，由于您所传递的只是警卫的类型名称，因此无法考虑实现此目标的方法。我是否应该只是硬着头皮，为每个角色编写单独的后卫班级，而打乱我拥有单一参数化类型的优雅幻想呢？

102 angular  typescript  angular2-routing 

不，这不是重复的问题。您会看到，SO和Github中存在大量的问题，这些问题规定我将此指令添加到具有[(ngModel)]指令且未包含在表单中的标记中。如果不添加，则会出现错误： ERROR Error: No value accessor for form control with unspecified name attribute 好的，如果我将此属性放在那里，错误就会消失。可是等等！没人知道它在做什么！Angular的文档根本没有提到它。当我知道不需要值访问器时，为什么需要它？此属性如何与值访问者连接？该指令有什么作用？什么是价值继承人，我该如何使用它？ 为什么每个人都继续做自己都不了解的事情？只需添加此行代码即可，谢谢，这不是编写好的程序的方法。 然后。我读了不是一个而是2个有关的角形式的巨大引导和有关部分ngModel： https://angular.io/guide/forms https://angular.io/guide/reactive-forms https://angular.io/guide/template-syntax#ngModel 你知道吗？没有一个提及价值访问者或ngDefaultControl。它在哪里？

102 javascript  angular 

尝试编写一个Angular 2管道，该管道将使用JSON对象字符串并将其漂亮打印/格式化后返回给用户显示。 例如，将采取以下措施： {“ id”：1，“ number”：“ K3483483344”，“ state”：“ CA”，“ active”：true} 并以HTML显示时返回如下所示的内容： 所以在我看来，我可以这样写： <td> {{ record.jsonData | prettyprint }} </td>

102 javascript  json  filter  angular  pipe 

我和我的团队已经获得了用于开发企业级Web应用程序的资金（不会详细介绍其功能）。该应用程序将具有许多单独的网页，但是其中两个页面更加集中且非常繁琐-就像许多用户交互，显示大量数据的模式，Websocket连接，聊天等一样繁重。 我已被任命为该项目的首席架构师，所以我正在对最新的Web框架进行一些研究。对于后端，我们已经进行了一些测试，并决定使用Azure SQL平台。到目前为止，我喜欢ASP.NET Core 2.0所做的改进。特别是Razor引擎，它是ASP.NET MVC早期版本的基础。 我想就“新” Razor vs. Angular / React之类获得一些专家意见。我特别关注性能。Core 2.0 Razor如何支持客户端渲染框架？差异可以忽略不计吗？我们的应用程序定位到潜在的1,000,000用户（大约100,000个并发用户）。 提前致谢！

101 asp.net  angular  reactjs  razor 

无法绑定到“ ngModel”，因为它不是“ input”元素的已知属性，并且没有与相应属性匹配的指令 注意：即时通讯使用alpha.31 import { Component, View, bootstrap } from 'angular2/angular2' @Component({ selector: 'data-bind' }) @View({ template:` <input id="name" type="text" [ng-model]="name" (ng-model)="name = $event" /> {{ name }} ` }) class DataBinding { name: string; constructor(){ this.name = 'Jose'; } } bootstrap(DataBinding);

101 data-binding  typescript  angular  2-way-object-databinding 

我正在尝试测试angular2双向绑定的控件input。这是错误： Can't bind to 'ngModel' since it isn't a known property of 'input'. app.component.html <input id="name" type="text" [(ngModel)]="name" /> <div id="divName">{{name}}</div> app.component.ts @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements OnInit { name: string; } app.component.spec.ts import { TestBed, async } from '@angular/core/testing'; import { AppComponent } from …

101 testing  angular  angular-cli  angular2-testing 

在这里它是完整使用pathmatch的，当我删除此pathmatch时，它甚至不会加载应用程序或运行项目 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { WelcomeComponent } from './home/welcome.component'; /* Feature Modules */ import { ProductModule } from './products/product.module'; @NgModule({ imports: [ …

101 angular  typescript 

编写Angular 2.0组件时，如何设置属性的默认值？ 例如-我想默认设置foo为'bar'，但是绑定可能会立即解析为'baz'。如何在生命周期挂钩中发挥作用？ @Component({ selector: 'foo-component' }) export class FooComponent { @Input() foo: string = 'bar'; @Input() zalgo: string; ngOnChanges(changes){ console.log(this.foo); console.log(changes.foo ? changes.foo.previousValue : undefined); console.log(changes.foo ? changes.foo.currentValue : undefined); } } 给定以下模板，这就是我期望的值。我错了吗？ <foo-component [foo] = 'baz'></foo-component> 登录到控制台： 'baz' 'bar' 'baz' <foo-component [zalgo] = 'released'></foo-component> 登录到控制台： 'bar' undefined undefined

101 angular  typescript 

我正在为经理开发一个角度应用程序，以跟踪他们的团队，并且遇到了@Output错误： An error occurred: @Output deleteMeeting not initialized in 'MeetingItemComponent'. 我有一个会议组件，生成一个MeetingItem组件列表。当用户单击不同的按钮（编辑，删除，显示详细信息）时，我想执行操作。 这是我的父级会议模板： <div class="meeting__list" [@newMeeting]="meetings.length"> <app-meeting-item *ngFor="let meeting of meetings" [meeting]="meeting" (deleteMeeting)="deleteMeeting($event)" (openMeetingDialog)="openMeetingDialog($event)" (messageClick)="openMessage($event)" ></app-meeting-item> </div> 我的MeetingItem模板（仅此帖子中涉及的部分）： <span class="meeting__actions"> <mat-icon *ngIf="meeting.message" (click)="onMessageClick(meeting)" matTooltip="Read the message" matTooltipPosition="above" class="icon--notes">notes</mat-icon> <mat-icon (click)="onOpenMeetingDialog(meeting)" matTooltip="Edit this meeting" matTooltipPosition="above" class="icon--edit">edit</mat-icon> <mat-icon (click)="onDeleteMeeting(meeting.id)" matTooltip="Delete this meeting" matTooltipPosition="above" …

101 angular  click  angular-event-emitter 

我正在尝试对Angular 5进行自定义验证，但遇到了以下错误 Expected validator to return Promise or Observable 我只想返回一个错误到表单，如果该值不符合要求，这是我的代码： 这是我的表格所在的组件 constructor(fb: FormBuilder, private cadastroService:CadastroService) { this.signUp = fb.group({ "name": ["", Validators.compose([Validators.required, Validators.minLength(2)])], "email": ["", Validators.compose([Validators.required, Validators.email])], "phone": ["", Validators.compose([Validators.required, Validators.minLength(5)])], "cpf": ["", Validators.required, ValidateCpf] }) } 这段代码在我要实现的验证文件中： import { AbstractControl } from '@angular/forms'; export function ValidateCpf(control: AbstractControl){ if (control.value …

101 javascript  angular  angular5  angular-forms  angular-validation 

我正在努力寻找一种方法来做到这一点。在父组件中，模板描述了table及其thead元素，但将渲染委托tbody给了另一个组件，如下所示： <table> <thead> <tr> <th>Name</th> <th>Time</th> </tr> </thead> <tbody *ngFor="let entry of getEntries()"> <my-result [entry]="entry"></my-result> </tbody> </table> 每个myResult组件都呈现自己的tr标签，基本上是这样的： <tr> <td>{{ entry.name }}</td> <td>{{ entry.time }}</td> </tr> 我之所以没有将其直接放在父组件中（避免需要使用myResult组件），是因为myResult组件实际上比这里显示的要复杂，因此我想将其行为放在单独的组件和文件中。 产生的DOM看起来很糟。我相信这是因为它无效，因为tbody只能包含tr元素（请参见MDN），但是我生成的（简化的）DOM是： <table> <thead> <tr> <th>Name</th> <th>Time</th> </tr> </thead> <tbody> <my-result> <tr> <td>Bob</td> <td>128</td> </tr> </my-result> </tbody> <tbody> <my-result> <tr> <td>Lisa</td> <td>333</td> </tr> </my-result> …

100 javascript  angular