2 回答

TA貢獻1876條經驗 獲得超5個贊
不要使用類級別的狀態變量來保存用戶的收藏狀態,而是在 Personajes 數組中的每個用戶對象上添加一個狀態鍵。
下面的 allApi 函數詳細說明了如何在每個用戶對象上添加狀態屬性。
private allApi() {
this.apiService.getAllApi()
.subscribe((data: any) => {
this.Personajes = data.results.map ( user => {
if ( user && typeof user === 'object') {
user['status'] = true;
}
return user;
});
console.log(data)
})
}
statusFav 函數在用戶狀態之間切換,即如果最初為假則將其設置為真,反之亦然。
public statusFav (user:any) {
user.status = !user.status
}
您還可以在 ngClass 指令中使用 user.status 的值在“far”和“fas”類之間切換,而不是使用 ngIf 和 ngElse 條件重復按鈕代碼
<div class="card-columns" *ngIf="suma < 2; else elseBlock">
<div class="card text-center" *ngFor="let personaje of Personajes">
<img class="card-img-top" [src]="personaje.image" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{personaje.name}}</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
</div>
<button (click)="statusFav(user.status)"
class="btn btn-success btn-block">
<i *ngIf="user.status" [ngClass]="{'fas' :user.status, 'far': !user.status}" class="fa-star"></i>
</div>
</div>
</div>
添加回答
舉報