如何在 *ngfor 项目中单击按钮时显示单独的事件？

Question

尝试显示 *ngFor 中特定项目的按钮点击结果。它应该仅在单击的项目下显示结果。 Original Image 如何在点击的特定卡片中显示结果？

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;
}

这是 two-way 绑定解决方案。您也可以通过 event-service 来完成。

谢谢朋友

如何在 *ngfor 项目中单击按钮时显示单独的事件？

How to display a seprate event on a button click in *ngfor item?

ionic-framework

ionic3

angular