如何在角度上添加可折叠的开始和停止按钮

Question

在我的角度应用程序中，我在页面中创建了仪表板页面，我为开始或停止创建了一个按钮(即切换)，但它不能正常工作。

.component.ts

toggleCollapse(jammer) {
    this.jammer.isCollapsed ? 'START' : 'STOP'
    this.jammer.isCollapsed ? 'START' : 'STOP'
}

.component.html

<button
    type="button"
    class="btn btn-warning"
    (click)="toggleCollapse()">START</button>

但是它不能正常工作，有人能在这方面帮我吗？

Answer 1

.component.ts

public isCollapsed = false;

toggleCollapse() {
    this.isCollapsed = !this.isCollapsed
}

.component.html

     <button
        type="button"
        [ngClass]="isCollapsed ? 'btn btn-warning' : 'btn btn-success'"
        (click)="toggleCollapse()">
        <span *ngIf="isCollapsed"> Stop <span>
        <span *ngIf="!isCollapsed"> Start <span>
    </button>

注意:如果需要，可以更改布尔值。

Answer 2

我想你想要按钮的标签是开始还是停止？

isCollapsed: boolean = true;

toggleCollapse() {
    this.isCollapsed = !this.isCollapsed;
}

<button
    type="button"
    class="btn btn-warning"
    (click)="toggleCollapse()">{{isCollapsed? 'START' : 'STOP'}}</button>