Как узнать, какая кнопка была нажата в цикле * 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"
  }

}