在我的 Angular 8 组件中,我向下拉控件添加了双向绑定(bind)。
观点
<select (ngModelChange)='termSelectChanged($event)' [ngModel]="selected">
<option [ngValue]="t" *ngFor='let t of termsColl'>{{t?.code}}</option>
</select>
组件代码export class AppComponent implements OnInit{
public termsColl : Array<DDModel>;
public selected : DDModel;
constructor( private s : DDService ){}
termSelectChanged( event ){
alert('HIT');
}
ngOnInit(){
//service call #1
this.s.getDataForComplexBind().subscribe( data => {
this.termsColl = data;
}, error => error );
//service call #2
this.s.getOtherData( ).subscribe( data => {
//model changes here
this.selected = this.termsColl[1];
}, error => { console.error(error); });
}
}
当组件加载时,它会执行 ngOnInit() 并设置模型绑定(bind)属性 Selected
数组的第一个元素 termsColl
. termsColl
有数据,但行 this.selected = this.termsColl[1];
不会将所选选项更改为下拉列表中的第一个元素。事实上,当组件加载时,我期待它触发事件 ngModelChange
但它也没有触发该事件。我添加了一个 alert()
在代码中,但它没有显示组件何时加载。只有当我从下拉列表中选择一个选项时它才会显示。如何更改代码以执行 ngModelChange
组件加载时的事件?这是我的堆栈 Blitz
https://stackblitz.com/edit/angular-version-yeg27j?file=src%2Fapp%2Fapp.component.ts
最佳答案
我更改了 ngModeChange
输入 DDModel
并调用您的termSelectChanged()
从订阅内部。我也改了[ngModel]
至[(ngModel)]
<select (ngModelChange)='termSelectChanged($event)' [(ngModel)]="selected">
<option [ngValue]="t" *ngFor='let t of termsColl'>{{t?.code}}</option>
</select>
termSelectChanged(selection: DDModel) {
console.log("HIT", selection);
}
ngOnInit() {
this.s.getOtherData().subscribe(
data => {
this.termsColl = data;
this.selected = this.termsColl[0];
this.termSelectChanged(this.selected);
},
error => {
console.error(error);
}
);
}
我无法告诉你为什么要更改 this.selected
来自代码不会触发 ngModelChange
.可能是因为ngModelChange
在模板中调用。
关于javascript - 为什么在下拉列表中加载组件时不会触发 ngmodelChange 事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64779683/