当组件加载到下拉菜单时，为什么 ngmodelChange 事件不会触发？

Question

在我的 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

Answer 1

我将ngModeChange输入更改为并从订阅内部DDModel致电您。termSelectChanged()我也[ngModel]改为[(ngModel)]<select&nbsp; (ngModelChange)='termSelectChanged($event)' [(ngModel)]="selected">&nbsp; <option [ngValue]="t" *ngFor='let t of termsColl'>{{t?.code}}</option></select>&nbsp; termSelectChanged(selection: DDModel) {&nbsp; &nbsp; console.log("HIT", selection);&nbsp; }&nbsp; ngOnInit() {&nbsp; &nbsp; this.s.getOtherData().subscribe(&nbsp; &nbsp; &nbsp; data => {&nbsp; &nbsp; &nbsp; &nbsp; this.termsColl = data;&nbsp; &nbsp; &nbsp; &nbsp; this.selected = this.termsColl[0];&nbsp; &nbsp; &nbsp; &nbsp; this.termSelectChanged(this.selected);&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; error => {&nbsp; &nbsp; &nbsp; &nbsp; console.error(error);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; );&nbsp; }我无法告诉您为什么更改this.selected代码不会触发ngModelChange. 可能是因为ngModelChange在模板中调用了。

Answer 2

您可以使用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。希望这能帮助您实现您的要求。

Answer 3

您可以在选项元素中使用value而不是使用。ngValue并分配t.code而不是分配t给value属性。<select&nbsp; (ngModelChange)='termSelectChanged($event)' [ngModel]="selected">&nbsp; <option [value]="t.code" *ngFor='let t of termsColl'>{{t?.code}}</option></select>参考： https: //angular-version-xkjuff.stackblitz.io

Answer 4

termsColl 有数据，但代码行 this.selected = this.termsColl[1]; 不会将所选选项更改为下拉列表中的第一个元素。因为您使用的是属性绑定 [ngModel]="selected"，而不是双向数据绑定。[(ngModel)]="selected" 用于双向绑定，语法由以下复合：[ngModel]="selected" 和 (ngModelChange)="selected = $event"另外，selected的值应该是下拉列表中可用的值，即ngOnInit(){&nbsp;&nbsp;this.selected = this.termsColl[1].code}下面的代码适合你：<select&nbsp; [(ngModel)]="selected" (change)="onSelection()">&nbsp; <option&nbsp; *ngFor='let t of termsColl' [value]="t.code" [selected]="selected === t.code">{{t?.code}}</option></select>