Javascript 基于if语句的图像动态变化_Javascript_Angular_Typescript_Ionic Framework

Javascript 基于if语句的图像动态变化

javascript angular typescript ionic-framework

Javascript 基于if语句的图像动态变化,javascript,angular,typescript,ionic-framework,Javascript,Angular,Typescript,Ionic Framework,我想在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.arrayTe

我想在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]);

   }
  }
    }

styleArray=[“单独的”、“视觉的”、“听觉的”、“逻辑的”、“物理的”、“社交的”、“口头的”]；
构造函数（）{
对于（var i=0；this.styleArray&&i，因为您将样式作为数组
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}}" />

使用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>

因为您将样式作为数组
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}}" />

使用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>

此处需要更改的点很少
最后在styleArray中删除，
在构造函数之外声明样式
使用角度图像[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
}

styleArray=[“单独的”、“视觉的”、“听觉的”、“逻辑的”、“物理的”、“社交的”、“口头的”]；
style=[{src:'./assets/img/defaultAvatar.png'，
按钮：'someMethod1'}，
];
构造函数（）{
对于（var i=0；this.styleArray&&i这里需要更改的点很少
最后在styleArray中删除，
在构造函数之外声明样式
使用角度图像[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
}

styleArray=[“单独的”、“视觉的”、“听觉的”、“逻辑的”、“物理的”、“社交的”、“口头的”]；
style=[{src:'./assets/img/defaultAvatar.png'，
按钮：'someMethod1'}，
];
构造函数（）{
对于（var i=0；this.styleArray&&i为什么插值时出现错误，它无法读取未定义的属性“0”？将呈现组件的OnInitHTML
，因此它会中断应用程序。使用类型安全运算符？
如下所示：插值仍有问题，无法读取未定义的属性0ed@AngularNewbie声明变量时，初始化它style:any[]=[]
为什么我在插值时出错，并且它无法读取未定义的属性“0”？组件的OnInitHTML
将被呈现，因此它会中断应用程序。使用类型安全运算符？
如下所示：插值仍有问题，无法读取的属性0undefined@AngularNewbie当declaring变量initialize itstyles:any[]=[]
Raja Mohamed，我已经尝试了你的解决方案，它是有效的！但是我对这部分有疑问：{src:'./assets/img/'+this.styleArray[I]+'.png'，button:2}，commonMethod（type）{if（type&&type==1）{else if（type&&type==2）{this.SocialInstructionPage（）}如果有不同的按钮怎么办？比如AuditoryInstructionPage（）我该怎么办that@AngularNewbie我已经根据您的要求编辑了答案。您可以将方法名称作为字符串传递，并通过传递参数从commonMethod调用click。我希望这将有助于满足您的要求。由于您的方法名称为字符串格式，您不能直接从html调用。因此，您可以使用这种绕过的方式。Lets说我有7张图片。我想把它们分类显示出来。我怎么能在HTML上显示呢？我想我的for loop1有点问题。首先删除数组末尾错误的逗号符号styleArray=[“孤立的”、“视觉的”、“听觉的”、“逻辑的”、“物理的”、“社交的”、“语言的”]；Raja Mohamed，我已经尝试过你的解决方案，它是有效的！但是我对这部分有疑问：{src:'./assets/img/'+this.styleArray[I]+'.png'，按钮：2}，commonMethod（type）{if（type&&type==1）{}else if（type&&type==2）{this.nstociationpage（）；}如果有一个不同的按钮呢？比如AuditoryInstructionPage（）我该怎么办that@AngularNewbie我已经根据您的要求编辑了答案。您可以将方法名称作为字符串传递，并通过传递参数从commonMethod调用click。我希望这将有助于满足您的要求。由于您的方法名称为字符串格式，您不能直接从html调用。因此，您可以使用这种绕过的方式。Lets说我有7张图片。我想把它们分类显示出来。我怎么能在我的HTML上显示呢？我想我的for loop1有点问题。首先删除数组末尾错误的逗号符号styleArray=[“孤立的”、“视觉的”、“听觉的”、“逻辑的”、“物理的”、“社交的”、“语言的”]；