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

小编典典

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

all

我在尝试使用 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向上移动一个级别，但是对于像在 a 中循环列表项这样的场景，如果集合为空，ul我最终会得到一个空的，或者我的 s
被包装在冗余容器元素中。li``li

这个plnkr的例子。

注意控制台错误：

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

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

阅读 110

2022-03-07

共1个答案

小编典典

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>（<template>在 Angular v4 之前）允许做同样的事情，但使用不同的语法，这令人困惑，不再推荐

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

2022-03-07