angular - *ngFor 内的 Angular [ngClass] 用于选定项目

Question

嗨，我需要一些帮助来将 [ngClass] 设置为单击的项目。我在css文件中有课。即使组件被销毁，我也需要这种样式保留在选定的项目上。我所拥有的不起作用。scc 不适用于单击的项目。

 <ul *ngFor="let item of list$ | async" [ngClass]="{ selected: selectedSong === item }">
    <li><h5><a (click)="sentItem(item.ID)">{{ item.name }}</a></h5></li>
    <li>{{ item.description }}</li>
 </ul>

selecedSong:any;

  sentItem(ID: string) {
    this.musicService.setViewed(ID);
    this.selectedSong = ID;
    this.router.navigate(["/some-route",ID]);
  }

标签： angular

Answer 1

你能试试这个吗？在您的 html 文件中，使用双等号 (==) 而不是 === 替换条件，以防万一值与类型不匹配。

[ngClass]="{ 'selected': selectedSong == item.ID }">