在 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 中將選擇元素繫結到物件的步驟
下面給出了一些要遵循的基本步驟。
- 將
ng-model
屬性新增到選擇元素。 - 將
selected
屬性新增到你要繫結的物件。 - 使用花括號語法
{{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 管道的更多資訊,請單擊此處。
我們得到上述示例的以下輸出。
點選這裡檢視上面提到的完整工作程式碼。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook