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);
  }
 }

現場演示

Answer 2

可以得到支持的服務是可觀察到的，因此我從以下方式修改了訂閱：

.subscribe(
        results => {this.backings = results},
        error => console.log(error),        
);  

至：

.subscribe(
        results => {this.backings = results, this.testBackingLength()},
        error => console.log(error),        
);  

然后添加：

testBackingLength(){
    /* If the length of the arrau is only one, the template auto selects it
    and does not trigger ngOnChange, so we need to manually trigger it here,
    this function is called from the subscribe a few lines up */
    if (this.backings.length === 1) {
    this.storeValueRedux(this.backings[0]['id'], this.count)}
}

因此，每次調用我的服務時，它都會測試數組的長度。 如果數組的長度為1，它將自動調用我的函數。