Angular 2 - 資料顯示

在 Angular JS 中，在 HTML 表單中顯示類屬性的值非常容易。

讓我們舉個例子，更深入地瞭解資料顯示。在我們的示例中，我們將檢視如何在 HTML 頁面中顯示類中各個屬性的值。

步驟 1 - 將 app.component.ts 檔案的程式碼更改為以下內容。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

關於以上程式碼，需要注意以下幾點。

我們定義了一個名為 appList 的陣列，其型別為字串。
我們將 3 個字串元素定義為陣列的一部分，它們是 Binding、Display 和 Services。
我們還定義了一個名為 TutorialName 的屬性，其值為 Angular 2。

步驟 2 - 對 app/app.component.html 檔案（即您的模板檔案）進行以下更改。

<div>
   The name of this Tutorial is {{TutorialName}}<br>
   The first Topic is {{appList[0]}}<br>
   The second Topic is {{appList[1]}}<br>
   The third Topic is {{appList[2]}}<br>
</div>

關於以上程式碼，需要注意以下幾點。

我們引用 TutorialName 屬性來告訴“我們的 HTML 頁面中教程的名稱是什麼”。
我們使用陣列的索引值來顯示陣列中的 3 個主題。

步驟 3 - 儲存所有程式碼更改並重新整理瀏覽器，您將獲得以下輸出。從輸出中，您可以清楚地看到資料根據類中屬性的值顯示。

另一個簡單的示例，即動態繫結，是使用 input html 標籤。它只是在 html 標籤中鍵入資料時顯示資料。

對 app/app.component.html 檔案（即您的模板檔案）進行以下更改。

<div>
   <input [value] = "name" (input) = "name = $event.target.value">
   {{name}}
</div>

關於以上程式碼，需要注意以下幾點。

[value] = ”username” - 用於將表示式 username 繫結到 input 元素的 value 屬性。
(input) = ”expression” - 這是將表示式繫結到 input 元素的 input 事件的宣告方式。
username = $event.target.value - 當觸發 input 事件時執行的表示式。
$event - Angular 在事件繫結中公開的表示式，其值為事件的有效負載。

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

現在，在輸入框中輸入一些內容，例如“Tutorialspoint”。輸出將相應更改。

列印頁面