Angular 2-同一DOM元素上的两个结构指令 [英] Angular 2 - Two structural directives on the same DOM element
问题描述
在使用Angular 2时,我遇到了一个问题:显然我不能在同一个DOM元素上放置两个结构化指令(ngFor
,ngIf
).
在Angular 1中,这曾经起作用.对于示例:
<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
指令放在子元素上,它可以正常工作:
<div *ngFor="#item of items; #e = even"><div *ngIf="e">{{item}}</div></div>
但是问题是我不想为此添加一个子元素.例如,如果它是表中的<tr>
标记,则在其中添加div
会使DOM变得很奇怪.
我知道Angular 2仍处于beta中,但是我想知道这是一个错误,一个功能还是可能存在一种未记录的方式来实现我想要的功能.
一个元素不支持两个结构指令.另请参见 https://github.com/angular/angular/issues/4792 >
使用模板语法表示外部语法,而micro语法表示内部语法.
While playing around with Angular 2, I've encountered a problem: apparently I can't put two structural directives (ngFor
, ngIf
) on the same DOM element.
In Angular 1 this used to work. For example:
<div ng-repeat="item in items" ng-if="$even">{{item}}</div>
When I try something similar with 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"]
}
}
Nothing happens. Not even an error.
If I put the ngIf
directive on a child element, it works:
<div *ngFor="#item of items; #e = even"><div *ngIf="e">{{item}}</div></div>
But the problem is I don't want to add a child element just for that. If, for example, it's a <tr>
tag inside a table, then adding a div
inside will make the DOM weird.
I know Angular 2 is still in beta, but I'm wondering if it's a bug, a feature, or maybe there's an undocumented way to achieve what I want.
Two structural directives are not supported on one element. See also https://github.com/angular/angular/issues/4792
Instead nest them while using template syntax for the outer one and micro syntax for the inner one.
这篇关于Angular 2-同一DOM元素上的两个结构指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!