Как изменить кнопку с нелюбимой на любимую в angular

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
  }

}

html

<div class="container mt-5">

    <button (click)="nextApi(1)" class="btn btn-outline-dark m-2">Next</button>


    <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(false)" *ngIf="status; else elseFav" class="btn btn-success btn-block"><i class="far fa-star"></i> Favorite</button>

            <ng-template #elseFav>
                <button (click)="statusFav(true)" class="btn btn-outline-success btn-block"><i class="fas fa-star"></i> Favorite</button>
            </ng-template>

        </div>
    </div>

    <ng-template #elseBlock>
        <div class="card-columns">
            <div class="card text-center" *ngFor="let nuevoPersonaje of NuevosPersonajes">
                <img class="card-img-top" [src]="nuevoPersonaje.image" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">{{nuevoPersonaje.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>
            </div>
        </div>
    </ng-template>



</div>

благодаря тому, кто может мне помочь.

Answer 1

Вместо того, чтобы использовать переменную состояния уровня класса для сохранения избранного статуса для пользователя, добавьте ключ состояния для каждого объекта пользователя в массиве 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 переключает статус пользователя, т.е. устанавливает его в значение true, если изначально оно было ложным, и наоборот.

  public statusFav (user:any) {
    user.status = !user.status
  }

Вы также можете использовать значение user.status в директиве ngClass для переключения между классами '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>

Answer 2

Проблема в том, что this.status не привязан к какому-либо конкретному элементу, это состояние компонента. Вам нужно иметь свойство status, которое изменяется при нажатии кнопки «Избранное».

Здесь stackblitz пример