时间戳

首页 > 解决方案 > Angular：按钮文本插值不起作用

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

问题描述

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

标签： javascriptangular

解决方案

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

也许它按字面意思对待它boolean，而不是你想按原样显示价值。

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

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

它对我有用。

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

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

推荐阅读