在使用Angular 2时,我遇到了一个问题:显然我不能在同一个DOM元素上放置两个结构指令(ngFor
,ngIf
)。
在Angular 1中,这曾经起作用。对于example:
<div ng-repeat="item in items" ng-if="$even">{{item}}</div>
当我尝试与Angular 2类似的东西时:
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<div *ngFor="#item of items; #e = even" *ngIf="e">{{item}}</div>
</div>
`,
directives: []
})
export class App {
constructor() {
this.items = ["a","b","c"]
}
}
什么都没发生。甚至没有错误。
如果我将ngIf
指令放在子元素上,it works:
<div *ngFor="#item of items; #e = even"><div *ngIf="e">{{item}}</div></div>
但问题是我不想为此添加子元素。例如,如果它是表格中的<tr>
标记,那么在内部添加div
会使DOM变得怪异。
我知道Angular 2仍处于测试阶段,但我想知道这是一个错误,一个功能,还是有一种无证的方式来实现我想要的。
答案 0 :(得分:5)
一个元素不支持两个结构指令。另请参阅https://github.com/angular/angular/issues/4792
而是将template syntax用于外部,并使用内部微语法来嵌套它们。