当组件加载到下拉菜单时，为什么 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  (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在模板中调用了。

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  (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 4

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>