Как отобразить отдельное событие при нажатии кнопки в элементе * ngfor?

Question

Попытка отобразить результат по нажатию кнопки для определенного элемента в *ngFor. Результат должен отображаться только под выбранным элементом. Исходное изображение Как отобразить результат в конкретной карте, на которую нажали?

home.html

    <ion-row>
     <ion-col col-6 *ngFor="let sr of searchResult">
       <ion-card>
         <ion-card-header>
           <ion-badge>Price: {{sr.PLL_NEW_PRICE}}</ion-badge>
           <ion-badge color="danger" slot="end">{{sr.ITEM_UOM_CODE}}</ion-badge>
         </ion-card-header>
         <img [src]="sr.ITEM_IMAGE_PATH" alt="No Image">

         <ion-card-content>
           <h5 class="title">
           {{sr.ITEM_FLEX_20}}
           </h5>
           <h5 class="title">{{sr.BRAND}}
           </h5>
           <div > Width &nbsp;&nbsp;&nbsp;&nbsp;: {{sr.ITEM_WIDTH}}</div>
           <div > Repeat &nbsp;&nbsp;: {{sr.ITEM_REPEAT_DESIGN}} </div>
           <div > Uses &nbsp;&nbsp;:{{sr.ITEM_USES}} </div>
           <ion-item>
             <button ion-button (click)="doInquery(sr.ID)" color="secondary" full>Stock Inquery</button>
           </ion-item>
           <!-- display result here-->
         </ion-card-content>
       </ion-card>
     </ion-col>
   </ion-row>

home.ts

doInquery(id: number){
  //some calculation
  return result;
}

Answer 1

В вашем HTML-связывании переменная результатов SAY - result

<ion-row>
 <ion-col col-6 *ngFor="let sr of searchResult">
   <ion-card>
     <ion-card-header>
       <ion-badge>Price: {{sr.PLL_NEW_PRICE}}</ion-badge>
       <ion-badge color="danger" slot="end">{{sr.ITEM_UOM_CODE}}</ion-badge>
     </ion-card-header>
     <img [src]="sr.ITEM_IMAGE_PATH" alt="No Image">

     <ion-card-content>
       <h5 class="title">
       {{sr.ITEM_FLEX_20}}
       </h5>
       <h5 class="title">{{sr.BRAND}}
       </h5>
       <div > Width &nbsp;&nbsp;&nbsp;&nbsp;: {{sr.ITEM_WIDTH}}</div>
       <div > Repeat &nbsp;&nbsp;: {{sr.ITEM_REPEAT_DESIGN}} </div>
       <div > Uses &nbsp;&nbsp;:{{sr.ITEM_USES}} </div>
       <ion-item>
         <button ion-button (click)="doInquery(sr.ID, $event)" color="secondary" full>Stock Inquery</button>
       </ion-item>
       <p>{{result}}</p>
     </ion-card-content>
   </ion-card>
 </ion-col>

И в вашем файле .ts создайте переменную result.

result:any;
doInquery(id: number, event:any){
  this.result = (some calculations result of Event data and ID);
  return this.result;
}

Это двустороннее связующее решение.Вы также можете сделать это через службу событий.

Спасибо, приятель.