*ngif和*ngf对同一元素造成错误

Question

*ngif和*ngf对同一元素造成错误

我不想用角的*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如果集合为空，则为liS封装在冗余容器元素中。

这个例子普朗克.

注意控制台错误：

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

我是做错什么了还是这是个虫子？

Answer 1

我还有一个解决办法。使用[hidden]而不是*ngIf<div&nbsp;[hidden]="!show"&nbsp;*ngFor="let&nbsp;thing&nbsp;of&nbsp;stuff">区别在于*ngIf将从DOM中删除元素，而[hidden]实际上是在玩CSS通过设置“显示：无”设置样式