时间戳

首页 > 解决方案 > 只有一个按钮可以处于“NO”状态

angular - 只有一个按钮可以处于“NO”状态

问题描述

我开发了一组输入，每个输入都有一组按钮，这些按钮会根据点击而变化。

每个按钮都以“是”状态开始，但如果单击它，它会变为“否”状态。

有没有办法只将一个按钮置于“否”状态？也就是说，如果一个按钮已经处于“否”状态，当您单击另一个按钮时，该按钮将变为“是”，最后一次单击变为“否”。

谢谢！

演示

代码

<div class="Submitcomments" *ngFor="let c of data; let  i = index;">
    <div>
        <div class="row rowComments" style="margin-top: 11px;">
        </div>
        <div class="form-group">
            <textarea  #myinput type="text" class="form-control AreaText" rows="2"></textarea>
        </div>
        <div class="row" style="margin-top: -20px; margin-left: 5px;">
            <button *ngIf="c.currentState=='pause'" class="btn reply" (click)="c.currentState='start'; focus()">Yes</button>
            <button *ngIf="c.currentState=='start'" class="btn reply1" (click)="c.currentState='pause'; focus()">No</button>
        </div>
    </div>
</div>

data = [
    {    
        ID:1,
        Name : "Name",
        currentState: "pause"
    },
    {    
        ID:2,
        Name : "Name2",
        currentState: "pause"
    },
       {    
        ID:3,
        Name : "Name3",
        currentState: "pause"
    },
       {    
        ID:4,
        Name : "Name4",
        currentState: "pause"
    },
  ];

标签： angulartypescript

解决方案

您只能为更改状态添加切换方法。

Stackblitz 演示

app.component.html

<div class="row" style="margin-top: -20px; margin-left: 5px;">
    <button class="btn reply" (click)="focus();toggleButton(i)">{{c.currentState == 'start' ? 'No' : 'Yes'}}</button>
</div>

app.component.ts

toggleButton(index) {
    this.data[index].currentState = this.data[index].currentState == "start" ? "pause" : "start";
}

推荐阅读