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

Question

我在 Bootstrap 3.4 中使用 Angular 7。这是一个按钮切换：

<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

您的组件中可以有一个变量，例如，

isOn = false;

并在 onToggle()

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

在 HTML 模板上，

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