在 Angular 2 中将选择元素绑定到对象

Angular 2 是一个流行的框架，用于创建 Web 应用程序。Angular 2 中最常见的任务之一是将选择元素绑定到对象。

本文将学习如何使用 ng-for 和 ng-value 指令将选择元素与 Angular 2 中的对象绑定。

使用 ng-for 和 ng-value 将选择元素绑定到 Angular 2 中的对象

Ng-For 是一个内置的模板指令，它可以简单地循环遍历一组项目，例如数组或对象，并为每个项目构建一个模板。

*ngFor="let <value> of <collection>"

ng-value 指令将选择元素绑定到一个对象。它指定应该映射到选择元素值的对象上的属性名称。

 <input ng-value="expression"></input>

有时，初学者会混淆 ng-value 和 value。因此，如果你在 Angular 2 中将选择元素与对象绑定，你必须知道 ng-value 和 value 之间的区别。

Angular 中 ng-value 和 value 的区别

不同之处在于 value 始终是一个字符串，而 ngValue 允许你传递一个对象。例如，你有一个用例，你需要在下拉列表中显示项目的名称。

并且当从菜单中选择单个对象时，你必须选择对象的 id 来搜索数据库。在这种情况下使用 ngValue 会有所帮助，因为它需要一个对象。

此外，你要填充的对象模型应该在你的对象中定义。

点击这里如果你想获得更多关于 ng-value 的信息。

在 Angular 2 中将选择元素绑定到对象的步骤

下面给出了一些要遵循的基本步骤。

1. 将 ng-model 属性添加到选择元素。
2. 将 selected 属性添加到你要绑定的对象。
3. 使用花括号语法 {{obj.property}} 将对象属性绑定到 select 元素。

让我们举一个例子来帮助我们详细了解所有步骤。

首先，我们将创建一个名为 AppComponent 的组件。然后我们将创建一个名为 example 的接口对象，显示 id 和 name。

在这种情况下，id 和 name 都存储字符串。在上述两个步骤之后，是时候通过添加一些信息来修改选项了。

完整的 /app.component.ts 代码如下。

import { Component } from '@angular/core';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Demo';

  selectedObject : example;
  SimpleExample = [
    {id: 'Welcome to New York City', name: 'New York'},
    {id: 'Welcome to Japan', name: 'Japan'},
    {id: 'Welcome to Singapore', name: 'Singapore'},
    {id: 'Welcome to Delft', name: 'Delft'}
  ]
}

interface example{
  id:string;
  name:string;
}

在 component.ts 文件中，我们添加了一个变量 selectedObject，一个对象 example，我们将使用 ngModel 将它绑定到 select 元素。

另一个变量 SimpleExample 包含一组用于显示 ngValue 选择选项的对象。

完整的 /app.component.html 代码如下。

<h2>Angular 2 Select Example</h2>

<select [(ngModel)]="selectedObject">
<option *ngFor="let show of SimpleExample" [ngValue]="show">
{{show.name}}
</option>
</select>

{{selectedObject | json}}

example 对象现在已添加到 selectedObject。我们使用 JSON 管道来显示它。

JSON 管道可以将输入对象转换为所需的结果，然后可以将其分配给变量或作为参数传递。它使用内置的 JavaScript 函数 JSON.stringify() 将数据转换为 JSON 字符串。

要了解有关 Angular JSON 管道的更多信息，请单击此处。

我们得到上述示例的以下输出。

点击这里查看上面提到的完整工作代码。