Angular：按钮文本插值不起作用答案

【问题标题】：Angular: Button text interpolation not workingAngular：按钮文本插值不起作用
【发布时间】：2019-12-18 12:29:59
【问题描述】：

我想获得与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 -->

【问题讨论】：

您好！这能回答你的问题吗？stackoverflow.com/questions/51714890/…
上面的代码工作正常 - stackblitz.com/edit/angular-d2jtex .. 你面临的错误是什么
您的代码没有任何问题，为什么您还需要一个函数？ <button (click)="enabled = !enabled">{{enabled}}</button>
按钮的文字从false到true只更新了一次，但是div标签的表达式每次都更新了。
@Lambalab，您尝试过我的解决方案吗？

标签： javascript angular

【解决方案1】：

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

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

你可以把它转成string，比如：

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

对我有用。

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

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

【讨论】：

【解决方案2】：

我试过你的代码，它似乎工作：

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

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

【讨论】：

我应该和你分享哪些文件？
我刚刚看到你的评论，如果它是一个新项目，我怀疑它是来自配置的问题，所以是的，看起来这是一个版本错误：S 在这种情况下，我们无能为力://

【解决方案3】：

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

【讨论】：