Question

我正在使用Ionic3。我想在点击功能触发时更改我的离子卡背景颜色，我有一些问题它对我不起作用，对此的任何帮助都会很棒。谢谢你

谢谢

html

<ion-card  [color]="buttonColor" (click)="someAction()" tappable>


          <ion-card-content >
           <p class="item-nme">01.Account Creation Success</p>
            <div item-end class="item-mark"><img src="../assets/imgs/checked.png"></div>
          </ion-card-content>

        </ion-card>

.TS

export class WelcomePage {
    private buttonColor: string = "primary";

    someAction() {
        this.buttonColor = "light";
    }
}

Answer 1

您需要使用ngStyle或style.background。 ion-card没有直接color属性。

<ion-card  [ngStyle]="{'background':buttonColor}" (click)="someAction()" tappable>
          <ion-card-content >
           <p class="item-nme">01.Account Creation Success</p>
            <div item-end class="item-mark"><img src="../assets/imgs/checked.png"></div>
          </ion-card-content>

        </ion-card>

使用样式：

<ion-card  [style.background]="buttonColor" (click)="someAction()" tappable>
          <ion-card-content >
           <p class="item-nme">01.Account Creation Success</p>
            <div item-end class="item-mark"><img src="../assets/imgs/checked.png"></div>
          </ion-card-content>

        </ion-card>

离子卡背景颜色不会改变点击事件

1 个答案: