I have an object:
export interface Album {
id: number;
title: string;
remarks: string;
artist: Artist;
albumType: AlbumType;
songs: Song[];
}
I can display an Album. This works without a problem.
Now I want to display the songs contained on the album. How can I do that?
I tried this:
<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>
But that doesn’t work. I’m getting this error:
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
Can anyone help?
3
This should do the job:
<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>
Remove {{}} in the *ngFor.
Use songs inetead of song.