Angular - 如果我选择不接受更改，请重置 <select><option> 选择

Question

我有一个由 <select> 和 <option> 标签组成的下拉列表，具有在进行选择时弹出确认框的功能。一个简单的 yes / no 。

单击 yes 会将当前状态设置为从下拉列表中选择的状态，而 no 当然不会更改状态。

但是，当单击 no 时，下拉列表将在我们刚刚拒绝更改的状态上保持突出显示。

有没有办法让它回到当前状态？

这是我的 stackblitz 来展示发生了什么

更新

下面的一些答案很好，但他们缺少的一件事是，如果 state 没有分配给一个值，我没有得到 disabled 显示的选项。

原文由 physicsboy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将 prevois 选择的选项保存在变量中 preState 并在用户单击否时将 newState 还原为 preState 。

 export class AppComponent  {
  state;
  newState;
  preState;
  checkState = false;

  options = [
    {name:'dormant'},
    {name:'active'},
    {name:'finished'}
  ];

  setState(state) {
    this.preState = this.newState;
    this.newState = state
    this.checkState = true;
  }

  selectedOption(option) {
    return this.newState === option;
  }

  yes() {
    this.state = this.newState;
    this.checkState = false;
  }

  no() {
    this.checkState = false;
    this.newState = this.preState;
  }
}

更新：

要显示更新中提到的禁用选项，请将 [selected]='!newState' 放在禁用选项上：

 <select (change)="setState($event.target.value)">
  <option disabled [selected]='!newState'>--Pick an option--</option>
  <option *ngFor="let option of options" [value]="option.name" [selected]="selectedOption(option.name)">{{option.name}}</option>
</select>

<div *ngIf="checkState" class="check-state">
  <p>Are you sure you want to change</p>
  <p><span class="bold">{{state}}</span> to <span class="bold">{{newState}}</span></p>
  <button (click)="yes()">yes</button><button (click)="no()">no</button>
</div>

原文由 Fartab 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

由于您没有使用两种方式绑定，因此您对变量所做的更改不会影响模板。这是我的方法：

HTML文件

<select [(ngModel)]="state" (change)="setState()">
  <option disabled [value]="null">--Pick an option--</option>
  <option *ngFor="let option of options" [value]="option.name" >{{option.name}}</option>
</select>

<div *ngIf="checkState" class="check-state">
    <p>Are you sure you want to change</p>
    <p><span class="bold">{{lastState}}</span> to <span class="bold">{{state}}</span></p>
    <button (click)="yes()">yes</button><button (click)="no()">no</button>
</div>

文件

  state;
  lastState;
  checkState = false;

  options = [
    {name:'dormant'},
    {name:'active'},
    {name:'finished'}
  ];

  constructor() {
    this.lastState = this.state;
  }

  setState() {
    this.checkState = true;
  }

  yes() {
    this.checkState = false;
    this.lastState = this.state;
  }

  no() {
    this.checkState = false;
    this.state = this.lastState;
  }

原文由 Nima Hakimi 发布，翻译遵循 CC BY-SA 4.0 许可协议