Question

我有一个从数据库检索的项目数组。该列表不断变化，因此html上显示的列表会动态变化。我希望仅突出显示列表中的选定项目，但是选中后整个列表将突出显示。

以下是角度2中的HTML代码

<div class="list-group " *ngFor="let year of years">
              
            <a routerLink="records" routerLinkActive="active" class="list-group-item list-group-item-action">
                <mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year}}</a>
                
        </div>

This is how the list is viewed upon selecting an item

Answer 1

更改模型，使您的对象包含所选的年份ID，标题和年份。然后排列一系列年份，然后单击以选中该年份并删除其他年份。然后在ngCLass中修改CSS并使用不透明，颜色等适当的CSS设置活动类。

<div class="list-group ">
<a *ngFor="let year of years" routerLink="records" routerLinkActive="active" class="list-group-item list-group-item-action">
  <mdb-icon (click)="setSelected(years, id)" fas icon="table" class="mr-3" [ngClass]="{ 'active': year?.selected }"></mdb-icon>{{year?.title}}</a>
 </div>

函数将为：

    setSelected(years: Year[], id: number) {

    if (!years) {
    return;
    }

    this.years.map( year => {

      return {
       ...year,
       selected: (year.id === id)
      });
    }

从列表中突出显示所选项目

1 个答案: