Question

我正在尝试将“超酷字体”图标切换为角度。问题是所有元素都在切换，而不是我单击的元素。

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

Answer 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

Answer 2

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

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

如何在Angular中单击切换字体超赞类？

2 个答案: