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

问题是this.status没有绑定到任何特定项目，这是组件范围的状态。您需要具有一个status属性，当您单击“收藏夹”按钮时，该属性会更改。

在这里example

Answer 2

与其使用类级别的状态变量来保存用户的收藏夹状态，请在Personajes数组中的每个用户对象上添加状态键。

下面的allApi函数详细说明如何在每个用户对象上添加状态属性。

stringr

statusFav函数可在用户状态之间切换，即，如果最初为假，则将其设置为true，反之亦然。

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)
      })
  }

您还可以在ngClass指令中使用user.status的值在“ far”和“ fas”类之间切换，而不必使用ngIf和ngElse条件重复按钮代码

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

如何将按钮从非收藏夹更改为收藏夹中的收藏夹

2 个答案: