在Angular2的选择列表中设置初始选定项

为了保存，我已经设法获得了一个选择列表与我的模型绑定，但是如果我提供了编辑功能，我无法确定如何使Angular2自动在选择列表上选择正确的选项。换句话说，如果我通过表单编辑一个预先存在的对象，我需要选择列表来反映对象的初始状态（例如，选择列表中的选项5），而不是默认为第一项

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object">{{object.name}}</option>
</select>

{{object.name}

我认为它应该如何工作，但没有

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object" [selected]="object === originalObject">{{object.name}}</option>
</select>

{{object.name}

所以本质上，我试图在选项上使用'selected'属性，但不管出于什么原因，它都不会做任何事情。本例中的“selectedObject”是组件中可以读取的对象。

如果使用

{{object.name}

您需要将components类中的属性

object

设置为要预先选择的

objects

中的项

类MyComponent{
对象
objects=[{name:'a'}，{name:'b'}，{name:'c'}]；
构造函数（）{
this.object=this.objects[1]；
}
}

好的，所以我找到了问题所在，我认为这种方法效果最好。在我的例子中，因为从Javascript的角度来看，这两个对象并不完全相同，例如：它们可能共享相同的值，但它们是不同的实际对象，例如，

originalObject

与

objects

完全分开实例化，后者本质上是一个参考数据数组（用于填充下拉列表）

我发现最适合我的方法是比较对象的唯一属性，而不是直接比较两个完整对象。此比较在所选的绑定属性

中完成：

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object" [selected]="object.uniqueId === originalObject.uniqueId">{{object.name}}</option>
</select>


{{object.name}
更新到angular 4.X.X，有一种新方法可以标记所选选项：

<select [compareWith]="byId" [(ngModel)]="selectedItem">
  <option *ngFor="let item of items" [ngValue]="item">{{item.name}}
  </option>
</select>

byId(item1: ItemModel, item2: ItemModel) {
  return item1.id === item2.id;
}


{{item.name}
byId（item1:ItemModel，item2:ItemModel）{
返回item1.id==item2.id；
}

有些
您可以使用

<select [ngModel]="object">
  <option *ngFor="let object of objects;let i= index;" [value]="object.value" selected="i==0">{{object.name}}</option>
</select>


{{object.name}
我希望它能帮助别人！（适用于角度6）

我必须动态添加大量的选择/选项，以下内容对我很有用：

<div *ngFor="let option of model.q_options; let ind=index;">

        <select 
          [(ngModel)]="model.q_options[ind].type" 
          [ngModelOptions]="{standalone: true}"
        > 
          <option 
            *ngFor="let object of objects" 
            [ngValue]="object.type" 
            [selected]="object.type === model.q_options[ind].type"
          >{{object.name}}
          </option>
        </select> 

        <div [ngSwitch]="model.q_options[ind].type">
          ( here <div *ngSwitchCase="'text' or 'imagelocal' or etc."> is used to add specific input forms )
        </div>
</div>

当用户再添加一个“输入选项”（请不要将“输入选项”与“选择/选项”混淆-选择/选项在此处是静态的）用户先前选择的特定选择/选项保留在每个/所有动态添加的“输入选项”的“选择/选项”上。
解决此问题的最简单方法是：

在模板中：

<select [ngModel]="selectedObjectIndex">
  <option [value]="i" *ngFor="let object of objects; let i = index;">{{object.name}}</option>
</select>

抱歉，我想我无意中在问题中调用了两个对象
object
。我现在修正了这个问题。
原始对象
和
对象
都存在并包含数据
originalObject
本质上就是所选列表项应该是什么，而
objects
是可能选项的数组，其中一个选项是
originalObject
。和我的回答一模一样。啊，我明白了。这似乎是因为它是一个参考？如果将Plunker中的代码更改为
this.originalObject={name:'b'}
，选择列表将不再默认为
b
，而是默认为数组中的第一个元素
a
。对此有什么想法吗？谢谢你的回答，因为他们引导我找到了答案。我相信我现在明白了问题的根源是Javascript比较对象的方式。我真的无法比较两个完全分开实例化的对象。@GünterZöchbauer这是正确的答案，但有时select不会显示所选选项（即使选择正确），知道吗？在我打开和关闭select之后，它会记住选择该选项。它可能与对象的大小有关（我有一个绑定到选项的大对象），或者可能选择项目的时间太晚了吗？
selected
属性被
originalObject
覆盖
ngValue
仅适用于
ngModel
。如果没有
ngValue
，则只能使用字符串值，而不能使用带有
的对象。因此，我认为你最好摆脱
[selected]=..
目前我没有使用
[selected]=..
，这正是我认为应该使用的方式。它现在不在那里，但在加载时没有选择正确的选项。我花了几个小时才找到这个答案。它保存了我的一天。它还需要为选择元素添加名称属性。否则我会error@yunuskula它似乎不需要name属性。很难直接应用，如果您可以提供一些
——详细的
答案可能会很好！丢失了ItemModel，一些文档/参考@至少能够进一步挖掘这项工作，您必须从select语句中删除[ngModel]=“originalObject:{{object.name}}重要的一点是，具有完全相同属性的两个不同实例将不匹配。i、 e.通过不同的api调用检索（对我来说就是这样）。然后将用作值的prop替换为选项中的prop，如下所示：myObj=this.options.filter（o=>o.id==myObj.id）[0]；请注意，然后修改对象也会在选项集合中更新它。
<select [ngModel]="selectedObjectIndex">
  <option [value]="i" *ngFor="let object of objects; let i = index;">{{object.name}}</option>
</select>

this.selectedObjectIndex = 1/0/your number wich item should be selected