在Angular2的选择列表中设置最初选择的项目

Posted 2023-02-22

【中文标题】在Angular2的选择列表中设置最初选择的项目

【英文标题】：Set initially selected item in Select list in Angular2

【发布时间】：2016-10-06 09:35:14

【问题描述】：

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

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

我想它应该如何工作，但没有！

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

所以本质上我正在尝试使用选项上的“选定”属性，但无论出于何种原因，它都没有做任何事情。在这种情况下，“selectedObject”将是组件中可以读取的对象。

【问题讨论】：

selected 属性被originalObject 覆盖。 ngValue 仅适用于 ngModel。如果没有ngValue，您只能使用字符串值，而不能使用带有<option> 的对象。因此我认为你最好摆脱[selected]=...

目前我没有使用[selected]=..，这正是我认为它应该工作的方式。它目前不存在，但在加载时没有选择正确的选项。

【参考方案1】：

好的，所以我找出了问题所在，并且我认为最有效的方法。就我而言，因为从 javascript 的角度来看，这两个对象并不相同，例如：它们可能共享相同的值，但它们是不同的实际对象，例如originalObject 与 objects 完全分开实例化，objects 本质上是一个参考数据数组（用于填充下拉列表）。

我发现最适合我的方法是比较对象的独特属性，而不是直接比较两个完整的对象。这个比较是在绑定属性selected中完成的：

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

【讨论】：

这行得通！ ，您必须从选择语句中删除 [ngModel]="originalObject" ： object.name

重要的一点是两个具有完全相同属性的不同实例将不匹配。即通过不同的 api 调用检索（对我来说就是这种情况）。然后只需将用作值的道具替换为选项中的道具，如下所示：myObj = this.options.filter(o => o.id === myObj.id)[0];请注意，然后修改对象也会在选项集合中更新它。

【参考方案2】：

更新到 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;

一些tutorial here

【讨论】：

我花了几个小时才找到这个答案。它拯救了我的一天。

还需要为选择元素添加名称属性。否则我会出错

@yunuskula 好像不需要name属性。

很难直接申请，如果你能提供一些--verbose答案会很好！丢失了 ItemModel，以及一些文档/参考 @ 至少能够进一步挖掘

【参考方案3】：

如果你使用

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

您需要将组件类中的属性object 设置为您希望预先选择的objects 中的项目。

class MyComponent 
  object;
  objects = [name: 'a', name: 'b', name: 'c'];
  constructor() 
    this.object = this.objects[1];
  

【讨论】：

抱歉，我想我不小心在问题中调用了两个对象object。我现在修改了这个问题。 originalObject 和 objects 都存在并包含数据。 originalObject 本质上是选定的列表项应该是什么，objects 是可能选项的数组，其中一个是 originalObject。

Plunker example 和我的回答一模一样。

啊，我明白了。似乎它可能与它作为参考有关？如果将 Plunker 中的代码更改为this.originalObject = name: 'b';，则选择列表将不再默认为b，而是默认为数组中的第一个元素a。对此有何想法？

感谢您的回复，因为他们让我找到了答案。我相信我现在明白我的问题的根源是 Javascript 比较对象的方式。我无法真正比​​较两个完全分开实例化的对象。

@GünterZöchbauer 这完全是正确的答案，但有时 select 不会显示所选选项（即使选择正确），知道吗？在我打开和关闭选择后，它记得选择该选项。它是否与对象的大小有关（我有一个巨大的对象绑定到选项）或者选择项目是否迟到？

【参考方案4】：

你也可以使用

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

【参考方案5】：

我希望它会帮助别人！ （适用于 Angular 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>

在 *.ts 中

// initial state of the model
// q_options in html = NewOption and its second argument is option type
model = new NewQuestion(1, null, 2, 
  [
    new NewOption(0, 'text', '', 1), 
    new NewOption(1, 'imagelocal', '', 1)
  ]);

// dropdown options
objects = [
    type: 'text', name: 'text',
    type: 'imagelocal', name: 'image - local file',
    type: 'imageurl', name: 'image URL'
   ( and etc.)
];

当用户再添加一个“输入选项”时（请不要将“输入选项”与选择/选项混淆 - 选择/选项在这里是静态的）用户之前选择的特定选择/选项将保留在每个/所有动态添加'输入选项的选择/选项。

【参考方案6】：

在 Angular 中解决这个问题的最简单方法是：

在模板中：

<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