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

这是双向绑定解决方案。您也可以通过事件服务来做到这一点。

感谢朋友。

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

1 个答案: