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

Question

我有2个数组，其中1个数组值被绑定以选择下拉值。 在清除另一个数组时，我想只渲染一个选项。 以下是代码：

组件

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

问题是，当我清除＆＃34; arrToClearArr＆＃34;数组，我选择的值为空。它应该被绑定到＆＃34; A＆＃34;因为我的模型包含＆＃34; A＆＃34;。

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

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

Plunker Link

预期行为：

1. 更改下拉值
2. 点击＆＃39;清除阵列＆＃39;按钮
3. 下拉值应为＆＃34; A＆＃34;，目前，它是＆＃34;＆＃34;

Answer 1

这是可选的，但我个人不会使用[ngModel]并尝试使用模板驱动的表单来解决这个问题，因为我相信直接绑定变量会更清楚。正如你对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>