[解決済み】*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 コレクションが空であれば、私の li を冗長なコンテナ要素で包む。

これでの例 プルンクル .

コンソールエラーに注意してください。

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

私のやり方が悪いのか、それともバグなのか？

解決方法を教えてください。

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>