*ngIf和*ngFor在同一个元素上导致错误

我在尝试在同一个元素上使用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 = 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);
  }

}

我知道简单的解决方案是将*ngIf移动到一个级别，但对于像在ul中循环列表项这样的场景，如果集合为空，我最终会得到一个空li，或者我的lis被多余的容器元素包装。

比如在这个地方。

注意控制台错误:

EXCEPTION: TypeError: Cannot read property 'name' of null in [{{thing.name}} in ShellComponent@5:12]

是我做错了什么还是这是个bug?

当前回答

<！——因为angular2稳定发布的多个指令不支持单个元素(来自文档)，你仍然可以像下面这样使用它——> < ul类= "列表组" > <template ngFor let-item [ngForOf]="stuff" [ngForTrackBy]="trackBy_stuff"> <李* ngIf = " item.name " class = " list-group-item > {{item.name}} < /李> < /模板> < / ul >

2016-11-02 10:55:06

其他回答

另一个解决方案可能是在你的for循环中放一个空数组，如果你不想显示它

<div *ngFor="let thing of show ? stuff : []">

哪里的“东西”是一个数组的“东西”和“显示”布尔显示或不内容

2020-09-02 14:24:54

你不能在同一个元素上使用ngFor和ngIf。你所能做的就是推迟填充你在ngFor中使用的数组，直到你的例子中的切换被单击。

这里有一个基本的(不是很好的)方法:http://plnkr.co/edit/Pylx5HSWIZ7ahoC7wT6P

2016-01-07 14:48:51

你可以用另一种方法检查数组长度

<div *ngIf="stuff.length>0">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</div>

2020-04-14 07:45:21

我用这个解决我的问题

<ng-container *ngFor="let item of menuItems">
  <li *ngIf="canShowItem(item)"></li>
</ng-container>

2021-10-12 16:40:22

Angular v2不支持同一个元素上有多个结构指令。作为一种变通方法，使用<ng-container>元素，它允许您为每个结构指令使用单独的元素，但它不会被标记到DOM中。

<ng-container *ngIf="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</ng-container>

<ng-template> (Angular v4之前的<template>)允许做同样的事情，但使用了不同的语法，这很容易混淆，不再推荐使用

<ng-template [ngIf]="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</ng-template>

2016-09-19 05:27:39

ngIf和ngFor在同一个元素上导致错误

推荐文章

最新文章

标签