亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將按鈕從不喜歡的角度更改為最喜歡的

如何將按鈕從不喜歡的角度更改為最喜歡的

料青山看我應如是 2022-07-08 15:57:10
我正在使用一個 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  }}
查看完整描述

2 回答

?
慕妹3242003

TA貢獻1824條經驗 獲得超6個贊

問題this.status與任何特定項目無關,這是一個組件范圍的狀態。當您單擊收藏按鈕時,您需要有一個status更改的屬性。

這里是stackblitz示例


查看完整回答
反對 回復 2022-07-08
?
慕運維8079593

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>


查看完整回答
反對 回復 2022-07-08
  • 2 回答
  • 0 關注
  • 95 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號