Question

我的组件列表中有一个专辑列表作为数组。在我的HTML中，我使用ngFor显示每个相册。这些项目中的每一项都具有默认类别“album_item”

查询后，我有一个返回相册名称的服务。如果服务中返回的相册名称与组件相册数组中的某个相册名称相匹配，我想添加一个“突出显示”类来显示哪个相册已匹配（例如“album_item_highlight”）

到目前为止，我的html显示了数组中的相册列表，我有正确的默认类显示，我可以正确地返回服务中的相册。

我很感激在项目匹配时分配另一个课程的帮助。

export class AlbumsComponent implements OnInit {

  albums = ["Album One", "Album Two", "Album Three"];

  returnedAlbum: string;

  matchingAlbum = true;

  constructor(
    public albumsService: AlbumsService,
  ) { }


  ngOnInit() {

    // My service is returning one album and storing it as 'myAlbum'
    this.returnedAlbum = this.ablumsService.myAlbum;
  }

}

<div class="album-wrapper">
  <div class="label">Albums</div>
  <div *ngFor="let album of albums">
    <div class="album_item" [class.selectedAlbum]="matchingAlbum"> {{ album }} </div>
  </div>
</div>

Answer 1

我设法使用以下方法使其工作（这看起来比查看索引更容易）

组件TS

this.matchingAlbum = this.albumService.mySettings_album;

组件HTML

<div [ngClass]="{'activeAlbum': album===matchingAlbum, 'defaultLabel': album !=matchingAlbum}"> {{ album }} </div>

Answer 2

您可以使用[ngClass]：

[ngClass]="{'someOtherClass': matchingAlbum}"

文档参考：https://angular.io/api/common/NgClass

根据匹配的文本分配类

2 个答案: