【问题标题】:angular2-dropdown not updatingangular2-dropdown 不更新
【发布时间】:2017-05-15 01:00:02
【问题描述】:

我打算在 angular2 中构建一个下拉菜单,只要用户选择一个项目,它就会将下拉列表值重置为默认值。这是我目前使用的代码:

//My Components.ts

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
selector: 'awesome-component',
template: `
<select [(ngModel)]="selectedModule" (ngModelChange)="onChange($event)">
 <option *ngFor="let module of modules" [value]="module._id">
{{module.moduleName}}</option>
</select>
`
})
export class AwesomeComponent implements OnInit {

modules: any[];
selectedModule: any = null;

ngOnInit(){
this.loadModules();
}

  loadModules(){
  this.modules = [];
  this.modules.push({moduleName:'Default Value',_id:1});
  this.modules.push({moduleName:'2017',_id:2});
  this.modules.push({moduleName:'2018',_id:3});
  this.modules.push({moduleName:'2019',_id:4});

  this.selectedModule = 1;
  }
  onChange(modules) {
  alert("Current id is:" + this.selectedModule+ "  Value reset to default");
 this.selectedModule = 1;
 }
}

这是一个有效的Plunker,它演示了这个问题。

目标是每当警报框关闭时,我都想将下拉列表更新为默认值。

【问题讨论】:

  • 出于好奇:用户选择项目后,您重置为默认值的目的是什么?
  • @developer033 此代码与我的项目相关,在该项目中,我弹出一个引导模式来代替警报框,我希望用户在关闭对话框时看到默认值。 sn-p 只是为了让我可以减少多余的代码并专注于问题

标签: angular


【解决方案1】:

这有点棘手,但您可以使用 setTimeout 让角度 rerender 视图。

查看工作中的plunker

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-03-26
    • 2018-01-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-06-27
    相关资源
    最近更新 更多