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 link

Answer 2

它应该全部更改，因为您在Acknowledge变量上执行的interpolation发生在所有卡上。所有卡都绑定相同的 Acknowledge 变量，在您的示例中，每个按钮都将考虑相同的Acknowledge变量，并显示值 Acknowledged Order 。如果您希望可以在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"
  }

}

如何知道在* ngFor循环中单击了哪个按钮？

2 个答案: