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

我在尝试使用Angular *ngFor和*ngIf同一个元素时遇到了问题.

当尝试遍历集合中的集合时*ngFor,集合被视为null并因此在尝试访问模板中的属性时失败.

@Component({
  selector: 'shell',
  template: `
    
Shell
Toggle!

    

      {{log(thing)}}
      {{thing.name}}
    
  `
})

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

}

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

  

    {{log(thing)}}
    {{thing.name}}