绑定到对象的角度<select>确认更改或恢复为上一个值

Question

我正在尝试实现非常简单的行为：如果用户取消了更改，请还原为先前的值。实际上，我成功了，但这花了我几个小时，而且我对实现仍然不满意，因为它并不那么明显和棘手。 因此，这是模板：     全部      {{state.name}} 和组件： 导出类AppComponent {   selectedState：状态= null；   状态：State [] = [     {名称：'Alabama'，人口：100000}，     {名称：'Alaska'，人口：50000}   ];   onStateChange（previousState：State，state：State）：void {     //如果我们将状态从“全部”更改为任意，就可以了     如果（previousState === null）{       this.selectedState =状态；       返回;     }     //否则，我们希望用户确认该更改     如果（确认（'您确定要选择其他状态吗？'））{       this.selectedState =状态；     }其他{       //但是不只是`this.selectedState = previousState;`       //我需要继续进行以下肮脏的破解。       //步骤1：更改绑定到[[ngModel]`的属性值，       //到任何一个，除了当前的，所以`null`可以       this.selectedState = null;       //步骤2：将该属性值还原为上一个，       //可笑的是，它已经被设置为前一个，       //因为我们要还原`this.selectedState`，       //同时传递完全相同的`this.selectedState`       //将此方法作为`previousState`参数，       //所以我们实际上是在做`this.selectedState = this.selectedState;`，       //但不是很明显。       //这只能异步执行，       //清除调用堆栈后。       setTimeout（（）=> {         this.selectedState = previousState;       }，0）;     }   } } 我希望评论是不言自明的，至少我尝试将它们写成这样。 正如我在评论中已经提到的，简单this.selectedState = previousState;不起作用，以及省略setTimeout（）。我也尝试过，但是没有运气： this.selectedState = previousState; this.changeDetectorRef.detectChanges（）; 我的解决方案基于此答案，是的，我也看到了这个答案，但是它对我来说不起作用，因为我将绑定到对象，而不是标量值。 演示：https://angular-hkaznb.stackblitz.io 套件版本： 角度：6.0.0

1 个答案:

答案 0 :(得分：1)

似乎我找到了更优雅的解决方案，它基于this answer。这个想法是操纵<select>的{​​{1}}。因此，这是模板：

selectedIndex

和组件：

<form class="form-inline mt-3">
    <div class="container-fluid">
        <div class="row">
            <div class="form-group col-12">
                <label for="states" class="mr-3">State</label>
                <select #s id="states" class="form-control" name="states" [ngModel]="selectedState"
                        (ngModelChange)="onStateChange(selectedState, $event, s)">
                    <option [ngValue]="null">All</option>
                    <option *ngFor="let state of states" [ngValue]="state">{{state.name}}</option>
                </select>
            </div>
        </div>
    </div>
</form>

onStateChange(previousState: State, state: State, statesEl: HTMLSelectElement): void { // If we're changing state from "All" to any, it's OK if (previousState === null) { this.selectedState = state; return; } // Otherwise we want the user to confirm that change if (confirm('Are you sure you want to select another state?')) { this.selectedState = state; } else { statesEl.selectedIndex = this.states.indexOf(previousState) + 1; } } 是必要的，因为+1在null的第一个this.states状态中，而在<select>之外。

演示： https://angular-rwnksz.stackblitz.io

相关问题

• 捕获change（）的先前值以将输入字段还原为该值？
• JavaScript确认框...取消时恢复更改
• IE10事件:(更改）确认未将值重置为先前值
• 默认值选择列表未绑定到init上的模型
• 使用optgroup从绑定选择下拉列表中获取所选对象
• 还原选择菜单更改
• 在angular中，如何在更改事件触发后获取select / ngModel之前的值
• 动态绑定变量：恢复为先前状态
• 绑定到对象的角度<select>确认更改或恢复为上一个值
• 当绑定到的值不变时，强制更改检测

最新问题

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

Answer 1

似乎我找到了更优雅的解决方案，它基于this answer。这个想法是操纵<select>的{​​{1}}。因此，这是模板：

selectedIndex

和组件：

<form class="form-inline mt-3">
    <div class="container-fluid">
        <div class="row">
            <div class="form-group col-12">
                <label for="states" class="mr-3">State</label>
                <select #s id="states" class="form-control" name="states" [ngModel]="selectedState"
                        (ngModelChange)="onStateChange(selectedState, $event, s)">
                    <option [ngValue]="null">All</option>
                    <option *ngFor="let state of states" [ngValue]="state">{{state.name}}</option>
                </select>
            </div>
        </div>
    </div>
</form>

onStateChange(previousState: State, state: State, statesEl: HTMLSelectElement): void { // If we're changing state from "All" to any, it's OK if (previousState === null) { this.selectedState = state; return; } // Otherwise we want the user to confirm that change if (confirm('Are you sure you want to select another state?')) { this.selectedState = state; } else { statesEl.selectedIndex = this.states.indexOf(previousState) + 1; } } 是必要的，因为+1在null的第一个this.states状态中，而在<select>之外。

演示： https://angular-rwnksz.stackblitz.io