我的代码:
<li *ngFor="let item of list; let i=index" class="dropdown-item" (click)="onClick(item)">
<template [ngIf]="i<11">{{item.text}}</template>
</li>
我试图在任何点上只显示10个列表元素.正如在这里的答案中所建议的那样,我使用了ngIf但这导致在页面上显示空列表项(超过10).
在成角度6之前，我曾[(ngModel)]用来直接将表单字段绑定到模型。现在不推荐使用（不能用于反应式表单），而且我不确定如何用表单值更新模型。我可以使用，form.getRawValue()但是这需要我用新的rawValue替换当前模型-这是不利的，因为我的主模型比本地表单模型更大并且具有更多的字段。
有任何想法吗？
我现在有
<mat-icon>info<mat-icon>
它给出了填充颜色的信息图标的输出.但是,我只想要图标的轮廓.我怎么做？
我想要的图标是https://material.io/tools/icons/?icon=info&style=outline而不是https://material.io/tools/icons/?icon=info&style=baseline
看起来他们都取得了同样的结果.使用TSLint,我不得不在VSCode中安装一个插件？如果我的团队中有人使用不同的编辑器,这可能不是优选的.
我正在研究Angular2的"英雄之旅"教程,而我却无法获得数组中定义的英雄列表.虽然ngFor似乎正在工作,因为它显示了10个列出的项目(只是列表点),但缺少内容(id和名称).
这是我到目前为止的代码:
import {Component} from 'angular2/core';
interface Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul>
<li *ngFor="#hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div><label>id: </label> {{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
`
})
export class AppComponent {
public title = 'Tour of Heroes';
public heroes = HEROES;
public selectedHero: Hero;
}
var HEROES: Hero[] = [
{ "id": 11, "name": "Arrow" },
{ "id": 12, "name": "Flash" },
{ …我的父模板中有两个按钮。一个按钮充当父/子表单的提交。另一个应该验证子组件表单。单击“提交”按钮即可验证两者 - 这是可以的。但是，我无法使用另一个按钮来验证我的子组件表单。本质上，仅当单击“检查电话”按钮时才显示子表单所需的错误。
父模板：
<form id="sampleform" [formGroup]="sampleForm" (ngSubmit)="formsubmit()">
<mat-form-field>
<input matInput type="text" formControlName="name" [errorStateMatcher]="matcher">
<mat-error *ngIf="sampleForm.controls.name.hasError('required') && isShowErrors">This field is invalid</mat-error>
</mat-form-field>
<br/>
<br/>
<child-component [isShowErrors]="isShowErrors"></child-component>
</form>
<button type="button">Check phone</button> <br/>
<button type="submit" form="sampleForm" (click)="formsubmit()">Submit</button>
父组件 TS：
export class AppComponent{
isShowErrors: boolean = false;
sampleForm: FormGroup;
matcher = new MyErrorStateMatcher();
constructor(private fb: FormBuilder){
}
ngOnInit(){
console.log(">>>>")
this.sampleForm = this.fb.group({
name: ['', Validators.required]
});
}
formsubmit(){
this.isShowErrors = true;
console.log(this.sampleForm);
if(this.sampleForm.valid){
//navigate
}
}
}
子组件模板：
<form [formGroup]="sampleChildForm">
<mat-form-field>
<input matInput …Angular CLI 中的以下命令生成一个包含 3 个文件的新组件 - HTML、TS 和 SCSS。
ng g c file --skip-import --spec false
我只需要 HTML 和 CSS。我已经跳过了规范文件。我如何告诉它跳过创建 SCSS？