模板似乎只等待 Observable 产生一次答案

【问题标题】：Template seems to wait for Observable to yield only once模板似乎只等待 Observable 产生一次
【发布时间】：2019-04-09 13:40:55
【问题描述】：

我正在使用服务拉取一个数组，而模板正在使用它来使用*ngFor 填充一个列表。

第一个列表工作正常，但我有第二个列表使用数组的子集，它会产生以下错误：

错误类型错误：无法读取未定义的属性“标签”

component.ts：

export class AudioVideoComponent implements OnInit {
  categories: Category[];
  subCategories: SubCategory[];

  constructor(private musicService: MusicService) { }

  ngOnInit() {
    this.categories = [];
    this.getAudioVideoCategories();
  }


  getAudioVideoCategories(): void {
    this.musicService.getAudioVideoCategories().subscribe(categories => {
      this.categories = categories;
      this.subCategories = flatten(categories.map(cat => cat.subCategories));
      console.log(this.subCategories);
    });
  }
}

component.html：

<ul class="nav nav-tabs firstNavBox">
    <li *ngFor="let category of categories"><a>{{category.label}}</a></li>
</ul>

<ul class="nav nav-tabs secondNavBox">
    <li *ngFor="let subCategory of subCategories"><a>{{category.label}}</a></li>
</ul>

现在，如果我将 Elvis 运算符添加到第二个列表：{{category?.label}} 我没有错误，但未填充列表。

知道如何让模板在尝试填充第二个列表之前等待填充subCategories 吗？

【问题讨论】：

尝试在您的类别标签上使用空安全运算符，例如 {{category?.label}}
另外你为什么在第二个循环中使用{{category.label}}而不是{{subCategory.label}}？

标签： html angular typescript angular6

【解决方案1】：

您应该在第二个 ngFor 中使用 {{subCategory.label}}。

【讨论】：

【解决方案2】：

这不是复制粘贴错误吗？

是：

<li *ngFor="let subCategory of subCategories"><a>{{category.label}}</a></li>

应该是：

<li *ngFor="let subCategory of subCategories"><a>{{subCategory.label}}</a></li>

您的模板解析器抱怨，因为您指的是 category 变量，该变量不存在于第二个 *ngFor 范围内

【讨论】：

由掌握R语言的人讲述；)