Как получить состояние переключения кнопки в пределах 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

В вашем компоненте может быть переменная, например,

isOn = false;

и в onToggle ()

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

в шаблоне HTML,

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

Answer 2

эта часть является условием постановки. Подумайте, что isOpened - логическое значение, которое имеет значение true, тогда «Вкл.» Покажет «Выкл.», Покажет

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>