Question

对于我来说，从2选择列表中获取所选值并在用户点击按钮后显示阵列中的图像的最佳方法是什么？有可能吗？

layerX/Y

组件.ts文件，我测试了按钮的功能，但我不知道如何将图像显示回html文件：

<ion-list>
  <ion-item>
   <ion-label>Gaming</ion-label>
    <ion-select [(ngModel)]="gaming1" (ionChange)='valuechange(gaming1)'>
      <ion-option *ngFor="let item of allList" [value]="item.values">{{item.name}}</ion-option> 
    </ion-select>
  </ion-item>
  <ion-item>
    <ion-label>Gaming</ion-label>
     <ion-select [(ngModel)]="gaming2">
       <ng-container *ngFor="let item of allList">
         <ion-option [value]="item.values" *ngIf="item.flag==0">{{item.name}}</ion-option> 
       </ng-container>
    </ion-select>
  </ion-item>
</ion-list>

<button ion-button block (click)="getData(gaming1 + gaming2)">Pass Data</button>

更新：Console Log

先谢谢你

Answer 1

您应该将参数逗号分隔到控制器，如：

    <!--In HTML file-->
        <img src="{{matchEndPlace.image}}">
        <button ion-button block (click)="getData(gaming1, gaming2)">Pass Data</button>


//in TS file
matchEndPlace: any = {};
getData(gaming1, gaming2){
   let matchString = gaming1.toLowerCase() + gaming2.toLowerCase();
   this.matchEndPlace = this.endPlaces.find(e => e.values === matchString) || {};
}

this.endPlaces=[{
          name:'Dota',
          values:'nesn64',
          image:'./assests/img/dotajpg'
        },{
          name:'CSGO',
          values:'nesps',
          image:'./assets/img/csgo.jpg'
        },{
          name:'Overwatch',
          values:'nes',
          image:'./assets/img/overwatch.jpg'
        }]

获取2个选定值并传递给按钮进行显示

1 个答案: