如何将按钮从不喜欢的角度更改为最喜欢的

Question

我正在使用一个 API，我想知道如何更改 * NgFor 内部按钮的状态，问题是当我单击将状态从收藏更改为非收藏时，它会将它们全部更改为状态可以改变吗？如果可能的话保持让我们说最喜欢的状态当用户点击它时，我已经尝试了几种方式，但我不能服务import { HttpClient } from "@angular/common/http";@Injectable({  providedIn: 'root'})export class ServiceService {  constructor(private http: HttpClient) { }  private url = 'https://rickandmortyapi.com/api/';  getAllApi(){    return this.http.get(`${this.url}/character`)  }  paginacion(paginacion:number){    return this.http.get(`${this.url}/character/?page=${paginacion}`)  }}home.component.tsimport { Component, OnInit } from '@angular/core';import { ServiceService } from 'src/app/services/service.service';@Component({  selector: 'app-home',  templateUrl: './home.component.html',  styleUrls: ['./home.component.css']})export class HomeComponent implements OnInit {  Personajes: any[] = []  NuevosPersonajes: any[] = []  public suma = 1;  public status = false;  constructor(private apiService: ServiceService) {    this.allApi()  }  ngOnInit(): void {  }  allApi() {    this.apiService.getAllApi()      .subscribe((data: any) => {        this.Personajes = data.results;        console.log(data)      })  }  nextApi(paginacion: number) {    this.suma = this.suma + 1;    console.log(this.suma)    this.apiService.paginacion(this.suma)      .subscribe((data: any) => {        this.NuevosPersonajes = data.results        console.log(data)      })  }  statusFav(status:boolean){    this.status = status  }}

Answer 1

问题this.status与任何特定项目无关，这是一个组件范围的状态。当您单击收藏按钮时，您需要有一个status更改的属性。

这里是stackblitz示例

Answer 2

不要使用类级别的状态变量来保存用户的收藏状态，而是在 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>