基于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>