從if語句動態改變圖像

Question

我想在我的html上顯示從if語句應該是什麼圖像。

在我的打字稿：

styleArray = ["Solitary", "Visual","Auditory","Logical","Physical","Social","Verbal",]; 
    constructor(){ 
    for (var i = 0; this.styleArray && i <= this.styleArray.length - 1; i++) { 
    if (this.arrayTest[0].style == this.styleArray[i]) { 

     this.styles = [ 
     { 
      src: './assets/img/' + this.arrayTest[0].style + '.png', 
      /* button: this.styleArray[i] + 'InstructionPage', */ 
      button: 2 
     } 
     ]; 
     console.log("First: " + this.styleArray[i]); 
    } 
    } 


    for(var i=0; this.styleArray && i <= this.styleArray.length -1 ; i++){ 
    if (this.arrayTest[1].style == this.styleArray[i]){ 
    this.styles = [ 
     { src: './assets/img/'+ this.styleArray[i] + '.png', 
     button:3 
     } 
    ]; 
    console.log("Second: " +this.styleArray[i]); 

    } 
    } 

    for(var i=0; this.styleArray && i <= this.styleArray.length -1 ; i++){ 
    if (this.arrayTest[2].style == this.styleArray[i]){ 
    this.styles = [ 
     { src: './assets/img/'+ this.styleArray[i] + '.png', 
     button:4 
     } 
    ]; 
    console.log("Third: " +this.styleArray[i]); 

    } 
    } 
    for(var i=0; this.styleArray && i <= this.styleArray.length -1 ; i++){ 
    if (this.arrayTest[3].style == this.styleArray[i]){ 
    this.styles = [ 
     { src: './assets/img/'+ this.styleArray[i] + '.png', 
     button:5 
     } 
    ]; 
    console.log("Fourth: " +this.styleArray[i]); 

    } 
    } 
    for(var i=0; this.styleArray && i <= this.styleArray.length -1 ; i++){ 
    if (this.arrayTest[4].style == this.styleArray[i]){ 
    this.styles = [ 
     { src: './assets/img/'+ this.styleArray[i] + '.png', 
     button:6 
     } 
    ]; 
    console.log("Fifth: " +this.styleArray[i]); 

    } 
    } 
    for(var i=0; this.styleArray && i <= this.styleArray.length -1 ; i++){ 
    if (this.arrayTest[5].style == this.styleArray[i]){ 
    this.styles = [ 
     { src: './assets/img/'+ this.styleArray[i] + '.png', 
     button:7 
     } 
    ]; 
    console.log("Sixth: " +this.styleArray[i]); 

    } 
    } 
    for(var i=0; this.styleArray && i <= this.styleArray.length -1 ; i++){ 
    if (this.arrayTest[6].style == this.styleArray[i]){ 
    this.styles = [ 
     { src: './assets/img/'+ this.styleArray[i] + '.png', 
     button:8 
     } 
    ]; 
    console.log("Seventh: " +this.styleArray[i]); 

    } 
    } 
    } 

在我的HTML：

<ion-row> 
    <ion-col width-25> 
     <ion-card class="card-5 full"> 
     <img class="list" [src]="styles[0].src" (click)="commonMethod(styles[0].button)" /> 
     </ion-card> 
    </ion-col> 
    </ion-row> 

    <ion-row> 
    <ion-col width-25> 
     <ion-card class="card-5 full"> 
     <img class="list" [src]="styles[1].src" (click)="commonMethod(styles[1].button)" /> 
     </ion-card> 
    </ion-col> 
    </ion-row> 

    <ion-row> 
    <ion-col width-25> 
     <ion-card class="card-5 full"> 
     <img class="list" [src]="styles[1].src" (click)="commonMethod(styles[1].button)" /> 
     </ion-card> 
    </ion-col> 
    </ion-row> 

    <ion-row> 
    <ion-col width-25> 
     <ion-card class="card-5 full"> 
     <img class="list" [src]="styles[2].src" (click)="commonMethod(styles[2].button)" /> 
     </ion-card> 
    </ion-col> 
    </ion-row> 

    <ion-row> 
    <ion-col width-25> 
     <ion-card class="card-5 full"> 
     <img class="list" [src]="styles[3].src" (click)="commonMethod(styles[3].button)" /> 
     </ion-card> 
    </ion-col> 
    </ion-row> 
    <ion-row> 
    <ion-col width-25> 
     <ion-card class="card-5 full"> 
     <img class="list" [src]="styles[4].src" (click)="commonMethod(styles[4].button)" /> 
     </ion-card> 
    </ion-col> 
    </ion-row> 
    <ion-row> 
    <ion-col width-25> 
     <ion-card class="card-5 full"> 
     <img class="list" [src]="styles[5].src" (click)="commonMethod(styles[5].button)" /> 
     </ion-card> 
    </ion-col> 
    </ion-row> 
    <ion-row> 
    <ion-col width-25> 
     <ion-card class="card-5 full"> 
     <img class="list" [src]="styles[6].src" (click)="commonMethod(styles[6].button)" /> 
     </ion-card> 
    </ion-col> 
    </ion-row> 

例如： 我是從頂部1排序方式頂部7，它應該顯示的圖像和其按鈕在我的視圖中按順序顯示從我的HTML從最高到最低。

我有一個錯誤，這是「src」&「按鈕」未定義。 - 我究竟做錯了什麼？

Answer 1

幾點需要在這裏改變，

1. 在styleArray

   刪除，最後

2. 聲明構造之外風格。

3. 使用角度圖像[src]屬性來顯示圖像。

代碼

styleArray = ["Solitary", "Visual","Auditory","Logical","Physical","Social","Verbal"]; 
    styles = [{ src: './assets/img/defaultAvatar.png', 
        button: 'someMethod1'}, 
       ]; 
    constructor(){ 
     for(var i=0; this.styleArray && i <= this.styleArray.length -1 ; i++){ 
      if (this.arrayTest[0].style == this.styleArray[i]){ 
       this.styles = [ 
       { src: './assets/img/'+ this.styleArray[i] + '.png', 
        button: 'AuditoryInstructionPage'}, 
       ]; 
      console.log("First: " + this.styleArray[i]); 
      } 
     } 
    } 
commonMethod(methodName){ 
    // If function name comes with() then remove by string manipulation 
    //This code will call your method by string 
    this[methodName](); // Pass params if required 
} 

HTML

<ion-row *ngFor = "styleElement in styles"> 
    <ion-col width-25 > 
      <ion-card *ngIf = "styleElement && styleElement.src && styleElement.button" class="card-5 full"> 
     <img class="list" [src]="styleElement.src" (click)="commonMethod(styleElement.button)" /> 
    </ion-card> 
    </ion-col> 
</ion-row> 

Answer 2

因爲你有styles作爲陣列

this.styles = [ 
      { src: './assets/img/'+ this.styleArray[i] + '.png', 
       button: this.styleArray[i] + 'InstructionPage()'}, 
      ]; 

而你正在試圖訪問它的屬性，所以下面使用它們，

<img class="list" src="{{this.styles[0].src}}" (click)="{{this.styles[0].button}}" /> 

更新1：

//Declare variable 
styles:any[] = []; 

使用ngIf來防止此錯誤

<ion-row *ngIf="styles.length > 0"> 
     <ion-col width-25 > 
       <ion-card class="card-5 full"> 
      <img class="list" src="{{this.styles[0].src}}" (click)="{{this.styles.button}}" /> 
     </ion-card> 
     </ion-col> 
</ion-row>