我在Angular2中使用ng模型的下拉列表,当我更改模型
时,我的视图没有更新
//intialize the variable
addplanhours:any[];
this.addplanhours=[{name: '--sel--',value:0}, {name: 'Head start',value:1}, {name: 'Nice going',value:2},{name: 'On Track',value:3},{name: 'Keep On trying',value:4},{name: 'Making process',value:5},{name: 'Wrapping up',value:6}];
//function of electrifyonchange
electrifyonChange(value) {
for(var i=0;i<=this.addplanhours.length;i++){
this.electrify= value;
console.log("new value",this.electrify);
}
<span>
<span class="addnotefont1">Electrifying</span>
<select class="addplanpicker"[(ngModel)]="electrify" (ngModelChange)="electrifyonChange($event)">
<option *ngFor="let a of addplanhours" [ngValue]="a.value">{{a.name}} </option>
</select>
</span>
[ngValue]
可以容纳任何类型的对象或值,因此您可以使用 [compareWith]
函数来维护下拉状态,因为您正在使用对象:
<select class="addplanpicker" [(ngModel)]="electrify" [compareWith]="isplanHourSelected">
<option *ngFor="let a of addplanhours" [ngValue]="a">{{a.name}} </option>
</select>
isplanHourSelected(o1, o2) {
return o1 && o2 && o1.value == o2.value
}
现在,如果要在Electrify中选择任何值时,您可以使用特定事件,现在可以使用electrify
,则可以使用OnChange策略。