添加了 Angular 收藏按钮，但颜色没有改变

Question

我已经添加了最喜欢的 Angular 图标，但颜色没有改变，当我刷新时它没有显示为最喜欢的

Favorite.component.html

<button class="favouri" (click)="isFavoritee(x.ad_Id)">
    <i class="fa" [ngClass]="{'fa-heart' : isFavorite , 'fa-heart-o': !isFavorite }"></i>
</button>

favourite.component.ts

isFavoritee(elem: any) {
    this.toggle = !this.toggle;
    this.favouritedata = [];
    const favo = {
        'login_Id': this.localservice.getLoginId() ? this.localservice.getLoginId() : '',
        'ad_id' : elem ? elem : '',
        'category_Id' : 27,
        'mode': 'INSERT'
    };

    this.authservice.post('/api/Favourite/insert', favo).subscribe(data1 => {
        this.favouritedata = data1;
        console.log(this.favouritedata);
    }, error => {
        alert('something went wrong');
    });
}

Answer 1

当您的ngClass 条件正在检查isFavorite 时，您正在切换组件中的变量toggle。您还需要使用一个数组，因为您有多个可以设置为收藏的产品。

需要根据传递的id设置isFavorite

isFavorite: boolean[] = [];

isFavoritee(elem: any) {
    this.isFavorite[elem] = !this.isFavorite[elem];
    // Add other code here
}

然后在您的模板中，更新ngClass 条件。

<button class="favouri" (click)="isFavoritee(x.ad_Id)">
    <i class="fa" [ngClass]="{'fa-heart' : isFavorite[x.ad_Id], 'fa-heart-o': !isFavorite[x.ad_Id] }"></i>
</button>

至于为什么刷新时不显示数据，既然你是发送一个POST请求来保存喜欢的数据，你应该也有一个GET请求来获取相同的数据。您需要在您的ngOnInit 中调用此请求，并根据从API 收到的响应设置isFavorite。