Angular 2 RC1 - 选择时设置默认选项

Question

全部！我有这个......

    <select #sel [(ngModel)]="sort">
        <option *ngFor="let xOptions of sortOptions">{{xOptions}}   </option>
    </select>

使用此代码：

sortOptions = ["Op1", "Op2"];

如何将默认值设置为Op2？

它不起作用：this.sort =“Op2”; 我看到了一些用于设置模型的文档。也许在RC1中有些变化？ ty！

Answer 1

从2.0.0-beta.14开始，对象可以绑定到使用ngValue（https://github.com/angular/angular/blob/master/CHANGELOG.md#user-content-200-beta14-2016-04-07），因此请尝试添加[ngValue]="xOptions"，如下所示：

<select [(ngModel)]="sort">
  <option *ngFor="let xOptions of sortOptions" [ngValue]="xOptions">{{xOptions}}</option>
</select>

另见plunker https://plnkr.co/edit/vLSiuQKQNbwFkIQ70j81?p=preview

Answer 2

由于sortOptions是一个原始值数组，因此您可以绑定到每个value元素的option属性：

<select [(ngModel)]="sort">
  <option [value]="sortOption" *ngFor="let sortOption of sortOptions">{{xOptions}}</option>
</select>

export class MyComponent {
  sortOptions = ["Op1", "Op2"];
  sort = "Opt2";   // or,  sort = this.sortOptions[1];
  ...
}

如果sortOptions包含一个对象数组，则使用ngValue将每个对象绑定到每个option元素，如@yurzui在其答案中所示。

Answer 3

如果将数据绑定到@model的下拉列表中，则可以使用ng-model。或者可以使用ng-selected