javascript - Angular:按钮文本插值不起作用

Question

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

代码 list 下方:

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

我试过你的情况，你是对的，这很奇怪。

也许它实际上将其视为 bool 值，而不是您想要按原样显示值。

您可以通过将其转换为字符串来扭转它，例如:

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

这对我有用。

顺便说一句，您可以将 toggle 函数简化为:

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