角度 4 中的着色按钮答案

【问题标题】：coloring button in angular 4角度 4 中的着色按钮
【发布时间】：2018-08-25 23:41:53
【问题描述】：

我尝试为两个按钮 .. 按钮 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 不着色

谢谢

【问题讨论】：

标签： angular typescript ionic-framework ionic3

【解决方案1】：

您根本不需要控制器中的函数。

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

您说您希望它们单独着色，因此您别无选择，只能给它们单独的变量。在控制器中创建另一个变量。

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

之后不要调用函数

【讨论】：

但您的修改也会出错，因为当 colorX 为 false 时，所有 span 内容 coloX=false 所以所有 span 都在着色:(
哦，所以你想分离按钮组？然后再创建两个变量。