如何在 HTML 内获取按钮切换状态

Question

我正在使用 Angular 7 和 Bootstrap 3.4。这是一个按钮开关：

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false"
    autocomplete="off" (click)="onToggle()">
    {{<what to put here> ? 'On' : 'Off'}}
</button>

如何填写 <what to put here> 部分以便根据其状态有条件地标记我的按钮？

Answer 1

这部分是声明的条件。认为 isOpened 是布尔值，如果为真则 "On" 将显示 else "Off" 将显示

https://stackblitz.com/edit/angular-ywyq51

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false"
    autocomplete="off" (click)="onToggle()">
    {{ isOpened ? 'On' : 'Off'}}
</button>

但是如果您在更改条件时没有任何控件，那么您可以在 html 中使用它而无需使用函数

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false"
    autocomplete="off" (click)="isOpened=!isOpened>
    {{ isOpened ? 'On' : 'Off'}}
</button>

Answer 2

您可以在组件中包含一个变量，例如，

isOn = false;

并在 onToggle()

onToggle() {
  this.isOn = !this.isOn;
}

在 HTML 模板上，

{{isOn ? 'On' : 'Off'}}

如何在 HTML 内获取按钮切换状态

How to get button toggle state within HTML

twitter-bootstrap-3

angular