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”＆amp; “按钮”未定义。 - 我做错了什么？

Answer 1

因为你有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>

Answer 2

这里几点需要改变，

最后在styleArray中删除，
在构造函数之外声明样式。
使用Angular image [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>

基于if语句动态更改图像

2 个答案: