*ngIf 和 *ngFor 在同一元素上导致错误 [英] *ngIf and *ngFor on same element causing error
问题描述
我在尝试在同一元素上使用 Angular 的 *ngFor
和 *ngIf
时遇到问题.
当尝试遍历 *ngFor
中的集合时,该集合被视为 null
,因此在尝试访问模板中的属性时失败.>
@Component({选择器:'壳',模板:`<h3>Shell</h3><button (click)="toggle()">Toggle!</button><div *ngIf="show" *ngFor="让东西的东西">{{日志(东西)}}<span>{{thing.name}}</span>
`})导出类 ShellComponent 实现 OnInit {公共的东西:任何[] = [];公开展示:boolean = false;构造函数(){}ngOnInit() {这个.东西= [{名称:'abc',ID:1},{ 名称:'huo',id:2 },{名称:'酒吧',ID:3},{名称:'foo',ID:4},{名称:'东西',ID:5},{名称:'其他',ID:6},]}切换(){this.show = !this.show;}日志(东西){控制台日志(东西);}}
我知道简单的解决方案是将 *ngIf
上移一个级别,但是对于循环遍历 ul
中的列表项等场景,我最终会得到一个空的 li
如果集合是空的,或者我的 li
被包裹在冗余的容器元素中.
此示例 plnkr.
注意控制台错误:
EXCEPTION: TypeError: 无法读取 [{{thing.name}} in ShellComponent@5:12] 中的 null 属性name"
我做错了什么还是这是一个错误?
Angular v2 在同一个元素上不支持多个结构指令.
作为解决方法,请使用
元素,该元素允许您为每个结构指令使用单独的元素,但它未标记到 DOM.
<div *ngFor="放东西">{{日志(东西)}}<span>{{thing.name}}</span>
</ng-容器>
<ng-template>
(Angular v4 之前的)允许做同样的事情,但使用不同的语法,这会让人困惑,不再推荐
<div *ngFor="放东西">{{日志(东西)}}<span>{{thing.name}}</span>
</ng-模板>
I'm having a problem with trying to use Angular's *ngFor
and *ngIf
on the same element.
When trying to loop through the collection in the *ngFor
, the collection is seen as null
and consequently fails when trying to access its properties in the template.
@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 = false;
constructor() {}
ngOnInit() {
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);
}
}
I know the easy solution is to move the *ngIf
up a level but for scenarios like looping over list items in a ul
, I'd end up with either an empty li
if the collection is empty, or my li
s wrapped in redundant container elements.
Example at this plnkr.
Note the console error:
EXCEPTION: TypeError: Cannot read property 'name' of null in [{{thing.name}} in ShellComponent@5:12]
Am I doing something wrong or is this a bug?
Angular v2 doesn't support more than one structural directive on the same element.
As a workaround use the <ng-container>
element that allows you to use separate elements for each structural directive, but it is not stamped to the DOM.
<ng-container *ngIf="show">
<div *ngFor="let thing of stuff">
{{log(thing)}}
<span>{{thing.name}}</span>
</div>
</ng-container>
<ng-template>
(<template>
before Angular v4) allows to do the same but with a different syntax which is confusing and no longer recommended
<ng-template [ngIf]="show">
<div *ngFor="let thing of stuff">
{{log(thing)}}
<span>{{thing.name}}</span>
</div>
</ng-template>
这篇关于*ngIf 和 *ngFor 在同一元素上导致错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!