NativeScript / Angular-使用ngModel / FormBuilder时如何在开关上设置检查状态的样式？

Question

考虑以下开关：

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

如果执行此操作，则仅在您尚未激活开关时才起作用，此后即使开关未激活，背景色也将始终相同：

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

如果我这样做：

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

这样，无论状态如何，背景都将始终相同。

将开关与angular的模型绑定一起使用时，样式设置开关的正确方法是什么？

Answer 1

我正在设计一个应用程序的样式，这是我会做的。

CSS：

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;
}

这是我的XML：

`<Switch id="userStatus" checked="false" />`

我希望这有帮助！