时间戳

首页 > 解决方案 > 添加了 Angular 收藏按钮，但颜色没有改变

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

问题描述

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

收藏夹.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');
    });
}

标签： angularfaviconfavorites

解决方案

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

需要isFavorite根据传递的id进行设置

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 请求来获取相同的数据。您需要根据从 API 收到的响应在您的ngOnInit和设置中调用此请求。isFavorite

推荐阅读