如何显示对象中包含的对象列表

Question

我有一个对象：

export interface Album {
  id: number;
  title: string;
  remarks: string;
  artist: Artist;
  albumType: AlbumType;
  songs: Song[];
}

我可以显示一个

Album

。这工作没有问题。

现在我想显示专辑中包含的歌曲。我怎样才能做到这一点？

我试过这个：

<tr *ngFor="let dataItem of {{album?.song}}">
  <td style="display:none;">{{dataItem.id}}</td>
  <td>{{dataItem.title}}</td>
  <td>{{dataItem.duration}}</td>
  <td>{{dataItem.remarks}}</td>
</tr>

但这行不通。我收到此错误：

NG5002: Parser Error: Unexpected token {, expected identifier, keyword, or string at column 18 in [let dataItem of {{album?.songs}}] in C:/Users/BSEBV60/source/repos/MusicAndBooksApplication/musicandbooksapplication.client/src/app/music/music-details/music-details.component.html@37:10

有人可以帮忙吗？

Answer 1

这应该可以完成工作：

<tr *ngFor="let dataItem of album?.songs ?? []">
  <td style="display:none;">{{dataItem.id}}</td>
  <td>{{dataItem.title}}</td>
  <td>{{dataItem.duration}}</td>
  <td>{{dataItem.remarks}}</td>
</tr>

删除

*ngFor

中的{{}}。

使用

songs

而不是

song

。