如何在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> 为了根据我的按钮的状态有条件地给它打上标签，我使用Angular 7和Bootstrap 3.4。

Answer 1

这个部分是语句的条件.认为isOpened是boolean，如果为真，则显示 "On"，否则显示 "Off"。

https:/stackblitz.comeditangular-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'}}