我有一个问题，试图使用Angular的* ngFor和* ngIf在同一个元素。
当试图循环遍历* ngFor中的集合时，集合被视为null，因此在尝试访问模板中的属性时失败。
@Component({
selector: 'shell',template: `
<h3>Shell</h3><button (click)="toggle()">Toggle!</button>
<div *ngIf="show" *ngFor="let thing of stuff">
{{log(thing)}}
<span>{{thing.name}}</span>
</div>
`
})
export class ShellComponent implements OnInit {
public stuff:any[]
public show:boolean
constructor) {}
ngOnInit() {
this.show = false;
this.stuff = [
{ name: 'abc',id: 1 },{ name: 'huo',id: 2 },{ name: 'bar',id: 3 },{ name: 'foo',id: 4 },{ name: 'thing',id: 5 },{ name: 'other',id: 6 },]
}
toggle() {
this.show = !this.show;
}
log(thing) {
console.log(thing);
}
}
我知道简单的解决方案是将* ngIf上移一个水平，但如果循环列表项在一个ul，我最终会有一个空的李，如果集合是空的，或我的lis包裹在冗余容器元素。
示例在这plnkr。
注意控制台错误：
EXCEPTION：TypeError：无法在ShellComponent @ 5：12中的[{{thing.name}}中读取null的属性’name’
我做错了什么，还是这是一个错误？
Angular2不支持同一个元素上的一个以上的结构指令。
作为解决方法，请使用< ng-container>元素，允许您为每个结构指令使用单独的元素，但它不会标记到DOM。
作为解决方法，请使用< ng-container>元素，允许您为每个结构指令使用单独的元素，但它不会标记到DOM。
<ng-container *ngIf="show">
<div *ngFor="let thing of stuff">
{{log(thing)}}
<span>{{thing.name}}</span>
</div>
</ng-container>
< template>允许做同样的但使用不同的语法，这是混乱，不再推荐
<template [ngIf]="show">
<div *ngFor="let thing of stuff">
{{log(thing)}}
<span>{{thing.name}}</span>
</div>
</template>
