如何在 Angular 中单击时切换字体真棒类？答案

【问题标题】：How to toggle font awesome class on click in Angular?如何在 Angular 中单击时切换字体真棒类？
【发布时间】：2020-09-30 17:45:03
【问题描述】：

我正在尝试以 Angular 切换 Font-awesome 图标。问题是所有元素都被切换而不是我点击的那个。

这里是代码的链接 - https://stackblitz.com/edit/angular-ivy-uwnuu6?file=src%2Fapp%2Fapp.component.html

【问题讨论】：

标签： angular twitter-bootstrap font-awesome

【解决方案1】：

所有元素都被切换，因为它们都在读取组件中的相同变量。

要为每个项目创建一个变量，您需要创建一个项目数组，并将收藏夹存储在对象中。然后，当您单击它时，仅切换该项目的收藏夹。

模板：

<tbody>
    <tr *ngFor="let item of items">
        <td (click)="toggleFavorite(item)">
            <i class="fa fa-star" [className]="item.favorite ? 'ylw_yellow' : 'gry'">Favorite</i>
        </td>
    </tr>
</tbody>

组件：

items = [
    {
        favorite: false
    },
    {
        favorite: false
    },
    {
        favorite: false
    }
]

toggleFavorite(item) {
    item.favorite = !item.favorite; 
}

分叉和更新代码：https://stackblitz.com/edit/angular-ivy-dfeep7?file=src/app/app.component.html

【讨论】：

【解决方案2】：

看看这个，将项目放在对象列表中可能更容易

https://stackblitz.com/edit/angular-ivy-qaceyb?file=src/app/app.component.ts

【讨论】：