角度:按钮文本插值不起作用

Question

我想获得与 https://stackoverflow.com/a/49680194 类似的结果，但就我而言，它不起作用。唯一的区别是变量boolean。你能解释一下我做错了什么吗？

在代码清单下方：

export class SomeComponent {
enabled: boolean = false;
toggle() {
if(this.enabled === true) {
this.enabled = false;
} else {
this.enabled = true;
}
}
}

和 html 模板：

<button (click)="toggle()">{{enabled}}</button> <!-- updates only one time (false -> true) -->
<div>{{enabed}}</div> <!-- works correctly -->

Answer 1

我试过你的案子，你是对的，这很奇怪。

也许它从字面上将其视为boolean，而不是您想要按原样显示价值。

您可以通过将其转换为string，例如：

<button (click)="toggle()">{{enabled + ''}}</button>

它对我有用。

顺便说一句，您可以将toggle功能简化为：

toggle() {
this.enabled = !this.enabled;
}

Answer 2

我尝试了您的代码，它似乎有效：

https://codesandbox.io/s/wonderful-easley-4ncuy?fontsize=14&hidenavigation=1&theme=dark

所以可能你的错误不在代码中，而在配置中，也许你可以展示你的项目，这样我们就可以清楚地看到事情。

Answer 3

我尝试了全新的项目，似乎这是一个与 Angular 版本8.2.14相关的错误，其他人可以证实我的理论吗？