javascript - Angular2自动触发ngModelChange

Question

所以我有以下代码:

<div class="form-group">
<label for="backings_select">Backing Single</label>
<select class="form-control"
        required
        [(ngModel)]="selectedBacking" 
        name="backings_select"
        (ngModelChange)="storeValueRedux($event, count)">
  <option *ngFor="let backing of backings" [ngValue]="backing.id" [selected]="backings.length === 1">{{backing.name}}</option>
</select>

它用服务调用的结果填充一个选择框，如果数组长度为 1，它会自动选择唯一可用的选项，这工作正常。

但是，默认情况下，选择框使用组件中的值作为其默认值。

因此，当进行服务调用时，如果数组的长度仅为 1，则模型的值会发生变化，但由于它是自动选择的(而不是通过用户输入)，所以 storeValueRedux事件没有触发。

但是，如果数组有多个条目，然后由用户选择，则将调用该函数并按要求工作。无论如何，在 backings.length = 1 的实例中触发 ngModelChange 吗？

Answer 1

您不能在 HTML 中的方法调用中使用条件，但您可以使用 change 并按如下方式处理方法中的条件

 <select class="form-control"
    required
    [(ngModel)]="selectedBacking" 
    name="backings_select"
    (change)="storeValueRedux($event, count)">
        <option *ngFor="let backing of backings" [ngValue]="backing.id"
            [selected]="backings.length === 1">{{backing.name}}</option>

 selectedBacking:any{};
  backings:any[]=[
    {id:1, name:'a'},
    {id:2, name:'a'}
    ]

  storeValueRedux(a,b){
     if(this.backings.length!=1){
    console.log(this.selectedBacking);
    console.log(a,b);
  }
 }

<强> LIVEDEMO