Question

我尝试着色两个按钮..按钮X和按钮Y ..当我点击按钮X所以着色蓝色时，当我点击按钮Y所以着色红色...

代码ts：

    public colorX:boolean =false;
        public colorY:boolean =false;

     public countX(colorX)
        {
            if (colorX === false) { colorX=true;}
        }

        public countY(colorY)
        {
            if (colorY === false) { colorY=true;}
        }

代码html：

          <ion-row no-padding>
          <ion-col>
              <span (click)="colorX=!colorX; countX(colorX)">
                <i class='fas fa-thumbs-up' [ngStyle]="{'color': colorX ===true ? 'blue' : 'black'}" ></i>
                12 
                </span>
              <span (click)="colorY=!colorY; countY(colorY)">
                <i class="fas fa-thumbs-down" [ngStyle]="{'color': colorY ===true ? 'red' : 'black'}"></i>
                4 
              </span> 
              <span>
                <i class="fas fa-comment"></i>
                12 
              </span>
          </ion-col>
        </ion-row>
      </ion-card> 
        </ion-col>


          <ion-row no-padding>
          <ion-col>
              <span (click)="colorX=!colorX; countlike(colorX)">
                <i class='fas fa-thumbs-up' [ngStyle]="{'color': colorX ===true ? 'blue' : 'black'}" ></i>
                12 
                </span>
              <span (click)="colorY=!colorY; countY(colorY)">
                <i class="fas fa-thumbs-down" [ngStyle]="{'color': colorY ===true ? 'red' : 'black'}"></i>
                4 
              </span> 
              <span>
                <i class="fas fa-comment"></i>
                12 
              </span>
          </ion-col>
        </ion-row>
      </ion-card> 
        </ion-col>

现在，当我点击第一个按钮X，所以着色按钮X，但第二个按钮X着色..当我点击第一个按钮X所以着色第一个按钮X，但第二个按钮Y着色...

当我点击第一个按钮X时的编码只是第一个按钮X着色和第二个按钮X没有着色按钮Y当我点击第一个按钮Y只是按钮第一个按钮Y是着色而第二个按钮Y没有着色

感谢

Answer 1

根本不需要控制器中的功能。

(click)="colorX=!colorX;"
(click)="colorY=!colorY;"

你说你想要它们单独着色，所以你别无选择，只能给它们单独的变量。在控制器中创建另一个变量。

(click)="colorXTwo=!colorXTwo;"
(click)="colorYTwo=!colorYTwo;"

之后不要调用函数

角4的着色按钮

1 个答案: