Angular 2 Html Select模型与选项值不匹配答案

【问题标题】：Angular 2 Html Select model not matching to option valueAngular 2 Html Select模型与选项值不匹配
【发布时间】：2017-11-23 23:54:20
【问题描述】：

我有 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>

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

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

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

Plunker Link

预期行为：

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

【问题讨论】：

在 DOM 中显示的选项元素是否正确？对于此示例，Value 是一个变量还是只是占位符文本？
是的，option 元素在 DOM 中正确显示，value 只是示例中的字符串，应该与用作 ngModel 的变量匹配。

标签： javascript html angular2-template angular2-forms

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

【讨论】：

是的，这行得通！我已经捕获（更改）事件以获取选定的值并进行进一步的操作。你能解释一下为什么一种方式绑定在它的值与选项值匹配后仍然不起作用？
你写'另外，我只想要一种方式绑定，因此我使用了 [ngModel]' 但你真正的意思是你想要两种方式数据绑定。由于上述解决方案是一种方式，而使用 ngModel 是两种方式。但我真的不明白您的解决方案需要两种方法。
好的，所以我使用 [ngModel] 而不是 [(ngModel)] 的原因是，无论初始值是什么，该值都应该绑定到选择。后记，当我更改值时，我不希望我的模式得到更新，因此 [ngModel]。这也可以通过完全删除 ngModel（根据您的回答）并添加（更改）事件来捕获已选择的内容来实现。
公平竞争，很抱歉我看到您使用的是[ngModel] 而不是[(ngModel)]。
没有问题，感谢您的解决方案，但是为什么 [ngModel] 在我的情况下不起作用的问题仍未得到解答:(