Question

我正在使用服务提取数组，并且模板正在使用它来使用*ngFor填充列表。

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

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

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之后再尝试填充第二个列表吗？

Answer 1

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

Answer 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变量

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

2 个答案: