Question

我正在尝试实施自定义＆＃34; myselect control＆＃34;描述一个＆＃34;小部件对象＆＃34;由值和选项数组生成。此对象可以基于websocket事件进行动态更改，这些事件会生成相同类型的新对象，因此＆＃34; myselect控件＆＃34;应该每次都显示新选项和新值。 Myselect还可以发出一个事件，使用新选择的值返回对象本身。

在plnkr中，如果按下＆＃34;更改小部件，可以看到选项和值的变化情况＆＃34;按钮。

现在重新启动plnkr，选择值＆＃34;两个＆＃34;首先，然后按＆＃34;更改小部件＆＃34;按钮。

结果是选项改变但是＆＃34; myselect控件＆＃34;不显示新值。有人可以帮我解决这个问题。感谢

//our root app component
import {Component, NgModule,Input,Output,EventEmitter,OnChanges,SimpleChange} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule}   from '@angular/forms';

@Component({
    selector:'my-select',
    template:`              
        <select *ngIf="widget"
                (ngModelChange)="onChangeValue($event)"             
                [ngModel]="widget.value">
              <option  [ngValue]="item.value" *ngFor="let item of widget.options">{{item.str}}</option>                     
        </select>`
})
export class MySelect implements  OnChanges{
    @Input() widget:Widget=null;    
    @Output() valueChanged:EventEmitter<Widget> = new EventEmitter<Widget>();

    onChangeValue(value) {  
        console.log('WidgetSelect - onChangeValue -> Value:',value);
        this.widget.value=value;
      this.valueChanged.emit(this.widget);
    }

    ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {  
        for (let propName in changes) {
            if (propName=="widget"){                    
                console.log("WidgetSelect - ngOnChanges -> WidgetName :", this.widget,changes["widget"].previousValue,changes["widget"].currentValue);
             break;
            }                       
        }       
    }
}


@Component({
  selector: 'my-app',
  template: `{{title}}<br>
  <my-select [widget]="mywidget" (valueChanged)="printWidget($event)"></my-select>
  <br><button (click)="changeWidget()">Change widget</button>
  `

})
export class App {
  title = "custom select";
  mywidget={
          value:1,
      options:[
        {str:"one",
         value:1},
        {str:"two",
          value:2
        }
      ]

  }
  changeWidget(){
    // set new widget
    this.mywidget={
        value:2,
      options:[
        {str:"one",
         value:1},
        {str:"two",
          value:2
        },
         {str:"three",
          value:3
        }
      ]
    }
  }

  printWidget(widget){
    console.log("widget ---->",widget);
  }

}



@NgModule({
  imports: [ BrowserModule,FormsModule ],
  declarations: [ App,MySelect ],
  bootstrap: [ App ]
})
export class AppModule {}

plnkr

修改

试图找到阻止我动态填充myselect的问题（并设置默认值），我创建了另一个只使用字符串本机类型的简单plunker。

plnkr 2

具有动态选项的Angular 2自定义选择控件

0 个答案: