Question

考虑这个开关：

<Switch class="switch" formControlName="answer"></Switch>

如果我这样做，它只在你还没有激活开关时才有效，之后即使开关没有激活，背景颜色总是一样的：

.switch[checked=true] {
  background-color: #FE4A49;
  color: #FE4A49;
}

如果我这样做：

.switch {
  background-color: #FE4A49;
  color: #FE4A49;
}

然后无论状态如何，背景总是相同的。

在使用角度模型绑定时使用开关样式的正确方法是什么？

Answer 1

我正在构建一个应用程序，这是我要做的。

CSS：

tail -f /var/log/auth.log | xargs -I {} echo {}

这是我的XML：

Switch#userStatus[checked=true]{
  color:#ff0048 ;
  background-color: white;
  transform: scale(1.25, 1.25); // This is for change the size when checked
  transform: translate(-5,0); // This is for stay the position after scale it
}

Switch#userStatus[checked=false]{
  color: gray;
  background-color: gray;
}

我希望这有帮助！

Answer 2

.switch-notchecked {
    background-color: #FE4A49;
    color: yellow;
}

.switch-checked {
    background-color: blue;
    color: green;
}

在您的模板中

<Switch #sw checked="false" (checkedChange)="switchChanged(sw.checked)" [class]="isChecked?'switch-checked':'switch-notchecked'"></Switch>

在您的组件中

isChecked:boolean;

 switchChanged(checked) {
        this.isChecked = checked;
    }

Answer 3

我遇到了开关问题

背景颜色

并没有按预期工作。更改背景颜色正在更改整个开关（灰色部分）。所以我只需要更改颜色属性：

Switch[checked=true] {
    color: #f68533;
}

NativeScript / Angular - 使用ngModel / FormBuilder时如何在交换机上设置检查状态？

3 个答案: