Angular2 自动触发 ngModelChange答案

【问题标题】：Angular2 trigger ngModelChange automaticallyAngular2 自动触发 ngModelChange
【发布时间】：2017-03-14 15:27:37
【问题描述】：

所以我有以下代码：

<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？

【问题讨论】：

标签： javascript angular

【解决方案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

【讨论】：

【解决方案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，它会自动调用我的函数。

【讨论】：