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

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.ts

import { 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() {&nbsp; &nbsp; this.apiService.getAllApi()&nbsp; &nbsp; &nbsp; .subscribe((data: any) => {&nbsp; &nbsp; &nbsp; &nbsp; this.Personajes = data.results.map ( user => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if ( user && typeof user === 'object') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;user['status'] = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return user;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; console.log(data)&nbsp; &nbsp; &nbsp; })&nbsp; }statusFav 函数在用户状态之间切换，即如果最初为假则将其设置为真，反之亦然。&nbsp; public statusFav (user:any) {&nbsp; &nbsp; user.status = !user.status&nbsp; }您还可以在 ngClass 指令中使用 user.status 的值在“far”和“fas”类之间切换，而不是使用 ngIf 和 ngElse 条件重复按钮代码<div class="card-columns" *ngIf="suma < 2; else elseBlock">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card text-center" *ngFor="let personaje of Personajes">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img class="card-img-top" [src]="personaje.image" alt="Card image cap">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5 class="card-title">{{personaje.name}}</h5>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content. This content is a little bit longer.</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button (click)="statusFav(user.status)"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="btn btn-success btn-block">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<i *ngIf="user.status" [ngClass]="{'fas' :user.status, 'far': !user.status}" class="fa-star"></i>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>