Ich habe ein Problem mit der Verwendung von Angular's*ngFor und*ngIf auf dem gleichen Element.

Wenn versucht wird, die Auflistung im*ngFor, die Sammlung wird als @ gesehnull und schlägt folglich fehl, wenn versucht wird, auf seine Eigenschaften in der Vorlage zuzugreifen.

@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);
  }

}

Ich weiß, dass die einfache Lösung darin besteht, das @ zu verschiebe*ngIf Eine Ebene höher, aber für Szenarien wie das Durchlaufen von Listenelementen in einemul, Ich würde entweder mit einem leeren @ endli wenn die Sammlung leer ist oder meinlis in redundante Containerelemente eingeschlossen.

Beispiel bei diesem plnkr.

Beachten Sie den Konsolenfehler:

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

Mache ich etwas falsch oder ist das ein Fehler?