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

Question

我有一个由和标记组成的下拉列表，具有在做出选择时弹出确认框的功能。一个简单的是/否。 单击“是”会将当前状态设置为从下拉列表中选择的状态，而“否”当然不会更改状态。 但是，当单击“否”时，下拉列表将在我们拒绝更改为的状态下保持突出显示。 有什么方法可以使它回到当前状态？ 这是我的闪电战，以显示发生了什么 更新 以下是一些不错的答案，但其中缺少的一件事是，如果未将状态分配给值，则不会显示出Disabled选项。

3 个答案:

答案 0 :(得分：1)

切换到反应形式并注册默认状态。

然后可以使用默认状态在表单控件上调用reset。

Stackblitz

<select [formControl]="select">
  <option disabled>--Pick an option--</option>
  <option *ngFor="let option of options" [value]="option.name" [selected]="selectedOption(option.name)">{{option.name}}</option>
</select>

select: FormControl = new FormControl(this.options[0].name);
defaultState = this.select.value;

constructor() {
  this.select.valueChanges.subscribe(value => this.setState(value));
}

...

no() {
  this.select.reset(this.defaultState);
  this.checkState = false;
}

N.B。 ：我使用了表单控件，但同样适用于表单组

答案 1 :(得分：1)

在变量preState中保留prevois选择的选项，并在用户单击否时将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;
  }
}

更新：

要显示UPDATE中提到的禁用选项，请将[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>

答案 2 :(得分：1)

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

  

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>

  

TS文件

  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;
  }

相关问题

• 更改选择选项选项
• 重置/取消选择选择选项
• 选项选择以动态更改下一个选择
• 如果选择此选项，此选项将更改为3选项
• 将angular2 select / option更改为ul / li绑定到选择
• 如果条件为
• 角度-如果我选择不接受更改，请重置<select> <option>选择
• 使用Angular2更改选择选项
• 为什么不能在select中选择选项？
• 选择选择标签中选择的选项

最新问题

• 我写了这段代码，但我无法理解我的错误
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• 是否有可能使 loadstring 不可能等于打印？卢阿
• java中的random.expovariate()
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 每千个数字得到
• 更新了城市边界 KML 文件的来源？

Answer 1

切换到反应形式并注册默认状态。

然后可以使用默认状态在表单控件上调用reset。

Stackblitz

<select [formControl]="select">
  <option disabled>--Pick an option--</option>
  <option *ngFor="let option of options" [value]="option.name" [selected]="selectedOption(option.name)">{{option.name}}</option>
</select>

select: FormControl = new FormControl(this.options[0].name);
defaultState = this.select.value;

constructor() {
  this.select.valueChanges.subscribe(value => this.setState(value));
}

...

no() {
  this.select.reset(this.defaultState);
  this.checkState = false;
}

N.B。 ：我使用了表单控件，但同样适用于表单组

Answer 2

在变量preState中保留prevois选择的选项，并在用户单击否时将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;
  }
}

更新：

要显示UPDATE中提到的禁用选项，请将[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>

Answer 3

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

  

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>

  

TS文件

  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;
  }