在 Angular 中使用项目数组答案

【问题标题】：Using Array of items in Angular在 Angular 中使用项目数组
【发布时间】：2020-03-12 06:27:37
【问题描述】：

我的数据库中有一些项目列表，我正在以数组的形式检索这些项目。我在我的页面上将这些项目显示为可选择项。单击特定项时，我想检索它的值（我想知道选择了哪个项目）。

这是 HTML 代码：

 <p>Year Wise Medical Records</p>

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

这是我从数据库中检索的方式：

this.years=af.list('/years/'+this.name).snapshotChanges();

这是列表在选择项目之前和之后的外观图像”：

列表中的所有项目都会在选择其中任何一项时突出显示。有人可以帮助我仅突出显示已选择的项目并通过打字稿在控制台上打印该项目值。

【问题讨论】：

标签： html arrays angular list

【解决方案1】：

试试这样：

Working Demo

<a routerLink="records" (click)="activeYear = year.key" [class.active]="activeYear == year.key" >
      <mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year.key}}
</a>

【讨论】：

这对我有用！，如何在控制台上打印值？所选项目
(click)="activeYear = year.key;getSelectedyear(year.key)"
在演示中添加

【解决方案2】：

你为项目传递索引

    <div class="list-group "  *ngFor="let year of years; index as i | async">

        <a routerLink="records"  routerLinkActive="active" >
            <mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year.key}}</a>

    </div>

为项目目标传递事件索引创建

    <button (click)="deleteItem(i)">delete</button>

【讨论】：