Angular 4 - 使用对象作为选择列表中的选项值

typescript

## Angular 4 中使用对象作为选择列表的选项值

在 Angular 4 中，创建选择列表并使用对象作为选项值是一种常见的需求。这种情况下，我们希望将对象的某个属性作为选项的显示文本，同时另一个属性作为选项的实际值。让我们来看看如何实现这一点。

创建选择列表

首先，我们需要定义一个对象数组，该数组将包含我们要在选择列表中显示的对象。假设我们有一个对象数组 items，每个对象有 id 和 name 属性：

typescript
export class AppComponent {
  items = [
    { id: 1, name: '选项 1' },
    { id: 2, name: '选项 2' },
    { id: 3, name: '选项 3' },
    // 更多对象...
  ];
}

使用对象属性作为选项

接下来，在 HTML 模板中，我们可以使用 Angular 的 *ngFor 指令循环遍历对象数组，并将对象的属性应用于选择列表中的选项：

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

在这个例子中，*ngFor 循环遍历 items 数组，并为每个对象创建一个 元素。[ngValue] 绑定到 item.id，以便在选择列表中将 id 属性作为选项的实际值。同时，{{ item.name }} 用作选项的显示文本。

获取选择的值

最后，我们可以使用双向绑定（[(ngModel)]）来获取用户选择的值。在组件中，selectedItem 属性将存储所选项的 id：

typescript
export class AppComponent {
  items = [
    { id: 1, name: '选项 1' },
    { id: 2, name: '选项 2' },
    { id: 3, name: '选项 3' },
    // 更多对象...
  ];
  
  selectedItem: number; // 存储所选项的 id
}

这样，当用户在选择列表中进行选择时，selectedItem 将自动更新为所选项的 id。

总的来说，在 Angular 4 中使用对象作为选择列表的选项值并不复杂。通过适当地使用 *ngFor 指令和绑定属性，我们可以轻松地创建选择列表并获取所选项的值。