切换开关在调用函数时不显示动画

Question

我正在使用 Angular 构建网站，并创建了一个拨动开关。 toggle switch picture

我的想法很简单。当点击开关时，它会在页面的.ts文件中调用一个名为“power”的函数，参数为“d.key”。所以我将它添加到切换开关的 html 中。 HTML code

这个方法有效，每次点击都会成功调用函数，但是我发现我的拨动开关被冻结了，冻结的意思是当我点击它时，它不会显示开关动画，比如从未被点击过。 "Tho the function is called, the switch remains like this"

如何解决这个问题，有什么建议吗？

Answer 1

您可以通过使用 [ngClass] 来实现这一点：

[ngClass]="{ 'checked': value }"

并根据 .checked 类更改样式。

详细实现请关注这篇文章：https://coryrylan.com/blog/angular-custom-form-controls-with-reactive-forms-and-ngmodel