如何在 Angular 中点击时切换字体 awesome class？

Question

我正在尝试切换 angular 中的 Font-awesome 图标。问题是所有元素都在切换，而不是我正在单击的元素。

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

Answer 1

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

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

Answer 2

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

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

模板：

<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

如何在 Angular 中点击时切换字体 awesome class？

How to toggle font awesome class on click in Angular?

twitter-bootstrap

font-awesome

angular