http://plnkr.co/edit/ihdajuucyoj5ze93bwiq?p = preview
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div class="container">
<div *ngFor="let v of myValues;">
This is my value: {{v}}
</div>
<hr>
<div *ngIf="show" *ngFor="let v of myValues;">
This is my value: {{v}}
</div>
`,
})
export class AppComponent {
public user: User = {
name: 'John',
address: {
address1: '11, High Street',
postcode: '1234'
}
}
myValues = ['one','two','three'];
show = true;
public save(form: IUser, isValid: boolean) {
console.log(form, isValid);
}
}
export interface User {
name: string;
address?: {
address1?: string;
postcode?: string;
}
}
可以看出,在此plunkr中,第二个 *ngfor将被执行太多次。
现在这是一个错误吗?还是我只是禁止使用 *ngfor和 *ngif在一起?我找不到任何文档。
*ngIf
和 *ngFor
不支持同一元素。
作为解决方法,您可以使用:
update(2.0.0)
<ng-container *ngIf="show">
<div *ngFor="let v of myValues;">
This is my value: {{v}}
</div>
</ng-container>
原始
<template [ngIf]="show">
<div *ngFor="let v of myValues;">
This is my value: {{v}}
</div>
</template>
您也可以使用此
<template let-v ngFor [ngForOf]="myValues">
<div *ngIf="show">
This is my value: {{v}}
</div>
</template>