当组件加载到下拉列表中时，为什么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);  });

                    
    }

} 

加载组件时，它会执行ngonit（），并使用数组的第一个元素设置所选的模型绑定属性<代码>termsColl有数据，但行<代码>此。已选择=此。termsColl【1】 不会将选定选项更改为下拉列表中的第一个元素。事实上，当组件加载时，我希望它触发事件ngModelChange，但它也没有触发事件。我在代码中添加了一个警报（），但在加载组件时没有显示。仅当我从下拉列表中选择一个选项时，它才会显示。如何更改代码，以便在加载组件时执行ngModelChange事件？

这是我的stackblitzhttps://stackblitz.com/edit/angular-version-yeg27j?file=src/app/app.component.ts

Answer 1

您可以在选项元素中使用值而不是值。并将t.code而不是t指定给值属性。

<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

Answer 2

如果要触发ngModelChange，可以使用ngModel的ViewTomodeUpdate（）更新值。你可以在这里找到更多信息。

但您需要做以下更改。

在html模板中：

<select  (ngModelChange)='termSelectChanged($event)' [ngModel]="selected" #ngModel="ngModel">
  <option [value]="t" *ngFor='let t of termsColl'>{{t?.code}}</option>
</select>

您可以看到，我正在模板中添加对ngModel的引用，我将在component类中使用它。

在组件类中：

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引用调用值来更新视图，这反过来会触发ngModelChange。

由于您没有直接使用双向绑定，因此必须将该值设置为触发器函数中的选定变量。

希望这能帮助您达到您的要求。

Answer 3

我将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。