如何知道在* ngFor循環中單擊了哪個按鈕？

Question

我有一個ngFor生成多個離子卡。 每張卡內都有一個按鈕。 問題是，當我單擊任何一個按鈕以更改其文本時，其他按鈕的文本也會更改。 我該如何預防？

<ion-card  *ngFor="let item of unack, let  i = index">
<ion-card-header>
  <p [ngStyle]="{'color': buttonColor2}">{{status1}}</p>
</ion-card-header>

<ion-card-content>


   <p align="center">Stores for order</p>
  <img src="">

  <div class="orderInfo">
    <p>Delivery Time</p>
    <p>{{item.delivery_from}} to {{item.delivery_to}}</p>
  </div>

  <div class="Custom">
    <p>Customer</p>
    <p>{{item.customer_name}}  {{item.customer_surname}}</p>
  </div>


  </ion-card-content>
<ion-list>

  <button class="Ack" *ngIf="HideACk" (click)="StartS(item)">
   {{Acknowledge}}
  </button>

Answer 1

您必須將所有屬性綁定到unack數組中的對象。 示例->每個對象都應具有Acknowledge屬性。

<ion-content padding>
    <ion-card  *ngFor="let item of unack, let  i = index">
    <ion-card-header>
      <p [ngStyle]="{'color': unack[i].buttonColor2}">{{unack[i].status1?unack[i].status1:""}}</p>
    </ion-card-header>

    <ion-card-content>


       <p align="center">Stores for order</p>
      <img src="">

      <div class="orderInfo">
        <p>Delivery Time</p>
        <p>{{item.delivery_from}} to {{item.delivery_to}}</p>
      </div>

      <div class="Custom">
        <p>Customer</p>
        <p>{{item.customer_name}}  {{item.customer_surname}}</p>
      </div>


      </ion-card-content>
    <ion-list>

      <button class="Ack" *ngIf="!unack[i]?.StartO" (click)="StartS($event, i)">
       Acknowledge
      </button>

      <button class="Ack" *ngIf="unack[i]?.StartO" (click)="customer_pressed($event, i)">
        Start Shopping
      </button>
    </ion-list>
  </ion-card>
</ion-content>

這是您編輯的代碼Stackblits鏈接

Answer 2

它應該全部更改，因為您在Acknowledge變量上執行的插值正在所有卡上進行。 所有卡都綁定相同的確認變量，在您的示例中，每個按鈕都將考慮相同的確認變量，並且將顯示值確認順序 。 如果您希望可以在item對象中創建另一個屬性，則說ack並為其分配一些其他文本，然后呈現{{item.ack}}，請檢查以下示例

<ion-content padding>
  <ion-card *ngFor = "let item of unack">
    <button (click) = "StartS(item)" ion-button>
      {{item.ack}}
    </button></ion-card>
</ion-content>

js文件可能如下所示：

export class HomePage {
  public unack = [
    { name : 'apple', color : 'red', ack : 'Not acknowledged'},
    { name : 'orange', color : 'red', ack : 'Not acknowledged'},
    { name : 'penut', color : 'brown', ack : 'Not acknowledged'},
    { name : 'milk', color : 'white', ack : 'Not acknowledged'}
  ]
  constructor(public navCtrl: NavController) {

  }
  StartS(item){
    item.ack = item.ack == "Not acknowledge" ? "Acknowledged Order" : "Not acknowledge"
  }

}