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

Posted 2023-03-05

【中文标题】模板似乎只等待 Observable 产生一次

【英文标题】：Template seems to wait for Observable to yield only once

【发布时间】：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？

【参考方案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语言的人讲述；)