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

Question

我有一个问题，试图在同一个元素上使用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，或者我的li被包装在冗余容器元素中。

示例在这个plnkr。

注意控制台错误：

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

我做错什么了还是这是一个错误？

Answer 1

正如@Zyzle和@Günter在评论（https://github.com/angular/angular/issues/7315）中提到的，这是不支持的。

具有

<ul *ngIf="show">
  <li *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </li>
</ul>

没有空的

填充列表时，没有多余的容器元素。

@Zyzle在评论中提到的github讨论（4792）也提供了另一个使用

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

此解决方案也不会引入任何额外/冗余的容器元素。

Answer 2

正如每个人所指出的，即使在一个元素中有多个模板指令在角1. x中工作，但在角2中是不允许的。你可以从这里找到更多信息：https://github.com/angular/angular/issues/7315

解决方案是使用

<template *ngFor="let nav_link of defaultLinks"  >
   <li *ngIf="nav_link.visible">
       .....
   </li>
</template>

但由于某些原因，上述方法在2.0.0-rc中不起作用。4在这种情况下，您可以使用

<template ngFor let-nav_link [ngForOf]="defaultLinks" >
   <li *ngIf="nav_link.visible">
       .....
   </li> 
</template>

有了更新，现在我们建议在2018年使用

这是最新的答案。

<ng-container *ngFor="let nav_link of defaultLinks" >
   <li *ngIf="nav_link.visible">
       .....
   </li> 
</ng-container>

Answer 3

Angular v2在同一个元素上不支持多个结构指令
使用

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

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