在 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 管道的更多資訊，請單擊此處。

我們得到上述示例的以下輸出。

點選這裡檢視上面提到的完整工作程式碼。