ngClass 的角度动态变量

Question

我是 Angular 的新手！ 我尝试在单击按钮时更改颜色。

循环绑定工作正常，包括在外部元素中显示动态变量，例如 {{'profile3.q2_' + (i+1) | translate}}，但是当我尝试 [ngClass] 变量绑定不起作用。

我应该如何申请“ [ngClass]="'q2_' + (i+1) =='1'？ ~~~“部分？

谢谢。

*.html 文件

如果不应用动态变量：

<ion-row class="ion-margin-top ion-margin-bottom">
   <ion-col size="4"> 
     <ion-button expand="block" fill="outline" 
       [ngClass]="q2_1 =='1'?'btn-background' : 'btn-default'" (click)="onClicked(1)">
          <span class="contentText">{{'profile3.q2_1' | translate}}</span> 
     </ion-button>  
   </ion-col> 
   <ion-col size="4"> 
     <ion-button expand="block" fill="outline" 
       [ngClass]="q2_2 =='1'?'btn-background' : 'btn-default'" (click)="onClicked(2)">
          <span class="contentText">{{'profile3.q2_2'| translate}}</span> 
     </ion-button>  
   </ion-col>
 </ion-row>
 
 ~~ 

期望的方向（应用动态变量和条件）：

<ion-row class="ion-margin-top ion-margin-bottom">
   <ion-col size="4" *ngFor='let in of counter(7) ;let i = index'> 
     <ion-button expand="block" fill="outline" 
       [ngClass]="'q2_' + (i+1) =='1'?'btn-background' : 'btn-default'" (click)="onClicked(i+1)">
          <span class="contentText">{{'profile3.q2_' + (i+1) | translate}}</span> 
     </ion-button>  
   </ion-col> 
 </ion-row> 

*.ts 文件：

public q2_1 : string = "0";  
public q2_2 : string = "0"; 
~~ 

counter(i: number) {
  return new Array(i);
} 

onClicked(opt){
  if (opt ==1) this.q2_1=this.q2_1=='0'? '1': "0";  
  if (opt ==2) this.q2_2=this.q2_2=='0'? '1': "0"; 
  ~~~~ 
} 
...  

------------------------

 

Answer 1

不幸的是，如果您想像这样直接动态引用变量，那么您在这里就不走运了。但是有一些简单的解决方法。假设您想要维护易于引用的单个变量，您可以进行一些小的更改。

.html

<ion-row class="ion-margin-top ion-margin-bottom">
   <ion-col size="4" *ngFor='let in of counter(7) ;let i = index'> 
     <ion-button expand="block" fill="outline" 
       [ngClass]="q2[i].val === '1' ? 'btn-background' : 'btn-default'" (click)="onClicked(i+1)">
          <span class="contentText">{{'profile3.q2_' + (i+1) | translate}}</span> 
     </ion-button>  
   </ion-col> 
 </ion-row> 

.ts

public q2_1 = { val: '0' };
public q2_2 = { val: '0' };

public q2 = [this.q2_1, this.q2_2];

counter(i: number) {
  return new Array(i);
}

onClicked(opt) {
  if (opt == 1) this.q2_1.val = this.q2_1.val == '0' ? '1' : '0';
  if (opt == 2) this.q2_2.val = this.q2_2.val == '0' ? '1' : '0';
}

我们将q2_1 和q2_2 转换为对象而不是纯字符串的原因是将它们转换为对象引用。这样，如果您选择直接更新变量，它将反映在 q2 数组中的引用中。如果我们要复制纯字符串，则会进行新的引用，并且更新变量不会更新数组。

如果您同意放弃单个变量，您可以将 .ts 文件简化为

public q2 = ['0', '0'];

counter(i: number) {
  return new Array(i);
}

onClicked(opt) {
  this.q2[opt] = this.q2[opt] == '0' ? '1' : '0';
}

并将点击处理程序从 onClicked(i+1) 更改为 onClicked(i)