내 html에 내 if 문을 기반으로 한 이미지를 표시하고 싶습니다.
내 Typescript에서 :
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"& "button"정의되지 않은 오류가 있습니다. - 내가 도대체 뭘 잘못하고있는 겁니까?
여기서 변경해야 할 점은 거의 없습니다.
제거 , 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
}
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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다