javascript - 为什么在下拉列表中加载组件时不会触发 ngmodelChange 事件？

Question

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

Answer 1

我更改了 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在模板中调用。