在我的 Angular 8 组件中，我向下拉控件添加了双向绑定。风景<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); }); }} Selected当组件加载时，它执行 ngOnInit() 并使用数组的第一个元素设置模型绑定属性termsColl。termsColl有数据，但该行this.selected = this.termsColl[1];不会将所选选项更改为下拉列表中的第一个元素。事实上，当组件加载时，我期望它触发事件ngModelChange，但它也没有触发事件。我在代码中添加了alert()，但在组件加载时它没有显示。仅当我从下拉列表中选择一个选项时它才会显示。ngModelChange如何更改代码以便在组件加载时执行该事件？这是我的 stackblitz https://stackblitz.com/edit/angular-version-yeg27j?file=src%2Fapp%2Fapp.component.ts
4 回答
Smart猫小萌
TA贡献1911条经验 获得超7个赞
我将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在模板中调用了。
Qyouu
TA贡献1786条经验 获得超11个赞
您可以使用viewToModelUpdate()来ngModel更新值，如果您想触发ngModelChange.
但您需要进行以下更改。
在html模板中：
<select (ngModelChange)='termSelectChanged($event)' [ngModel]="selected" #ngModel="ngModel">
<option [value]="t" *ngFor='let t of termsColl'>{{t?.code}}</option>
</select>
您可以看到我在模板中添加了对 ngModel 的引用，我将在组件类中使用它。
在组件类中：
export class AppComponent {
name = "Angular 6";
version = VERSION.full;
public termsColl: Array<DDModel>;
public selected: string;
@ViewChild("ngModel") ngModel: NgModel;
constructor(private s: DDService) {}
termSelectChanged(event) {
this.selected = event;
}
ngOnInit() {
this.s.getOtherData().subscribe(
data => {
this.termsColl = data;
this.ngModel.viewToModelUpdate(this.termsColl[1]);
},
error => {
console.error(error);
}
);
}
}
您可以看到我正在使用ngModel引用来调用viewToModelUpdate带有值的 ，这反过来会触发ngModelChange.
由于您没有直接使用双向绑定，因此必须将值设置为selected触发函数内的变量termSelectChanged。
希望这能帮助您实现您的要求。
慕妹3146593
TA贡献1820条经验 获得超9个赞
您可以在选项元素中使用value而不是使用。ngValue并分配t.code而不是分配t给value属性。
<select (ngModelChange)='termSelectChanged($event)' [ngModel]="selected">
<option [value]="t.code" *ngFor='let t of termsColl'>{{t?.code}}</option>
</select>
参考： https: //angular-version-xkjuff.stackblitz.io
MM们
TA贡献1886条经验 获得超2个赞
termsColl 有数据，但代码行 this.selected = this.termsColl[1]; 不会将所选选项更改为下拉列表中的第一个元素。
因为您使用的是属性绑定 [ngModel]="selected"，而不是双向数据绑定。
[(ngModel)]="selected" 用于双向绑定，语法由以下复合：
[ngModel]="selected" 和 (ngModelChange)="selected = $event"
另外，selected的值应该是下拉列表中可用的值，即
ngOnInit(){
this.selected = this.termsColl[1].code
}
下面的代码适合你：
<select [(ngModel)]="selected" (change)="onSelection()">
<option *ngFor='let t of termsColl' [value]="t.code" [selected]="selected === t.code">{{t?.code}}</option>
</select>
添加回答
举报
0/150
提交
取消