javascript - Angular 2 Html 选择模型与选项值不匹配

Question

我有 2 个数组，其中 1 个数组值绑定(bind)到选择下拉值。在清除另一个数组时，我只想渲染一个选项。代码如下:

组件

@Component({
  selector: 'my-app',
  templateUrl : 'app/app.html'
})
export class AppComponent {
  arrToClear = [1,2,3,4];
  arrToBind = ["NONE", "SOME", "OTHER"];
  modelToBind = 'NONE';

}

查看

<小时/>

MODEL -> {{modelToBind}}
<button type='button'(click)="arrToClear.length = 0; modelToBind = 'NONE'">Clear Array </button>


<select class="form-control"
                            id="someId"
                            name="someName"
                            [ngModel]="modelToBind"
                            #someName="ngModel"
                            >
                      <ng-container *ngIf="arrToClear.length">
                        <option *ngFor="let data of arrToBind"
                                [ngValue]="data"> {{data}}
                        </option>
                      </ng-container>
                      <option value="NONE" *ngIf="!arrToClear.length">
                        Value
                      </option>
                    </select>

问题是，当我清除“arrToClearArr”数组时，我选择的值为空。它应该绑定(bind)到“A”，因为我的模型包含“A”。

此外，我只想要单向绑定(bind)，因此我使用了 [ngModel]。

我在这里缺少什么？任何帮助将不胜感激。谢谢。

Plunker Link

<小时/>

预期行为:

1. 更改下拉值
2. 点击“清除阵列”按钮
3. 下拉值应为“A”，目前为“”

Answer 1

这是可选的，但就我个人而言，我不会使用 [ngModel] 并尝试使用模板驱动的表单来解决此问题，因为我相信直接绑定(bind)变量会更清晰。就像您一样用 for 循环做了。

<select class="form-control" id="someId" formControlName="someName" name="someName">
  <ng-container *ngIf="arrToClear.length">
    <option *ngFor="let data of arrToBind" [value]="data"> {{data}}</option>
  </ng-container>
  <option [value]="modelToBind" *ngIf="!arrToClear.length">{{modelToBind}</option>
</select>

或者，您可以不保持所有内容相同，只编辑最后一个选项。

<select class="form-control" id="someId" [ngModel]="modelToBind" #someName="ngModel" name="someName">
  <ng-container *ngIf="arrToClear.length">
    <option *ngFor="let data of arrToBind" [ngValue]="data"> {{data}}</option>
  </ng-container>
  <option [value]="modelToBind" *ngIf="!arrToClear.length">{{modelToBind}</option>
</select>