如果长度不为 0，如何在 Angular 中使用 *ngIf 列出项目？

Question

    <h1>{{title}}</h1>
<ul>
  <li *ngFor="let breed of data.message | keyvalue">
    <a [routerLink]="['/picsofbreed']" [queryParams]="{breed: breed.key}" target="_blank">{{breed.key}}</a> 
    <ul *ngIf="breed.value.length > 0">
    <!-- trying to only show list if breed.value is not empty--> 
      <li>{{breed.value}}</li>
      <!-- <li *ngFor="let sub of breed.value">{{sub}}</li> trying to iterate breed.value-->
    </ul>
  </li>
</ul>
<app-gallery></app-gallery>

我正在尝试遍历狗子品种，但前提是长度> 0。 https://dog.ceo/dog-api/documentation/点击此处查看 json 正文。

我得到的长度不是未知的属性。 如果没有子品种，每个品种都有一个空数组。

零件

    import { Component, OnInit } from '@angular/core';
import { DogbreedsService } from './dogbreeds.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-dogbreedlist',
  templateUrl: './dogbreedlist.component.html',
  styleUrls: ['./dogbreedlist.component.css']
})
export class DogbreedlistComponent implements OnInit {
  data: any; 
  
  title:string  = 'Dog Breeds and Subbreeds';
  constructor(private route: Router, private breedData: DogbreedsService){}
  ngOnInit() 
  {
    this.breedData.getBreeds().subscribe((result) => {
      this.data = result
    })
  }

}

Answer 1

我建议不要尝试在模板中做这种事情。

相反，在组件中，创建您实际想要显示的数据结构（例如，删除空类别），然后只进行简单的绑定而不使用条件逻辑。