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

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，它将自动调用我的函数。

Angular2自动触发ngModelChange

2 个答案: