AngularDart4.0 指南- 显示数据
2019獨角獸企業重金招聘Python工程師標準>>>
您可以通過將HTML模板中的控件綁定到Angular組件的屬性來顯示數據。
在這個頁面中，您將創建一個包含英雄列表的組件。 您將顯示英雄名單的列表，并有條件地在列表下方顯示一條消息。
最終的用戶界面如下所示：
現場示例（查看源代碼）演示了此頁面中描述的所有語法和代碼片段。
用插值顯示組件屬性
顯示組件屬性的最簡單方法是通過插值來綁定屬性名稱。 使用插值，可以將屬性名稱放在視圖模板中，并用雙花括號括起來：{{myHero}}。
按照設置說明創建名為displays_data的新項目。
然后通過更改模板和組件的主體來修改app_component.dart文件。
當你完成后，它應該是這樣的：lib/app_component.dart
import 'package:angular/angular.dart'; @Component(selector: 'my-app',template: '''<h1>{{title}}</h1><h2>My favorite hero is: {{myHero}}</h2>''', ) class AppComponent {final title = 'Tour of Heroes';String myHero = 'Windstorm'; }您向以前的空組件添加了兩個屬性：title和myHero。
修改后的模板使用雙重大括號插值顯示兩個組件屬性：
template: '''<h1>{{title}}</h1><h2>My favorite hero is: {{myHero}}</h2> ''',Angular會自動從組件中抽取title和myHero屬性的值，并將這些值插入到瀏覽器中。 當這些屬性改變時，Angular會更新顯示。
更準確地說，重新顯示是在與視圖相關的某種異步事件之后發生的，例如按鍵，計時器完成或對HTTP請求的響應。
請注意，您不要調用new來創建AppComponent類的實例。 Angular正在為你創建一個實例。 怎樣創建的？
@Component注解中的CSS選擇器指定了一個名為<my-app>的元素。 該元素是index.html文件正文中的占位符：web/index.html (body)
<body><my-app>Loading...</my-app> </body>當您使用AppComponent類（在web / main.dart中）引導時，Angular將在index.html中查找<my-app>，查找它，實例化AppComponent的一個實例，并將其呈現在<my-app> 標簽。
現在運行應用程序。 它應該顯示標題和英雄的名字：
模板內嵌或模板文件？
您可以將組件的模板存儲在兩個地方之一中。 您可以使用模板屬性內聯定義它，也可以使用組件元數據@Component注解的templateUrl屬性鏈接到單獨定義模板的HTML文件。
內嵌和單獨的HTML之間的選擇是一個品味，環境和組織政策的問題。 這里的應用程序使用內聯的HTML，因為模板很小，演示更簡單，沒有額外的HTML文件。
在任一種樣式中，模板數據綁定都具有對組件屬性的相同訪問權限。
用* ngFor顯示一個列表屬性
要顯示英雄列表，首先向組件添加英雄名字列表，并將myHero重新定義為列表中的第一個名字。
lib/app_component.dart (class)
class AppComponent {final title = 'Tour of Heroes';List<String> heroes = ['Windstorm','Bombasto','Magneta','Tornado',];String get myHero => heroes.first; }現在使用模板中的Angular ngFor指令來顯示英雄列表中的每個項目。lib/app_component.dart (template)
template: '''<h1>{{title}}</h1><h2>My favorite hero is: {{myHero}}</h2><p>Heroes:</p><ul><li *ngFor="let hero of heroes">{{ hero }}</li></ul> ''',此UI使用帶有<ul>和<li>標簽的HTML無序列表。 <li>元素中的* ngFor是Angular“repeater”指令。 它將<li>元素（及其子元素）標記為“repeater模板”：
<li *ngFor="let hero of heroes">{{ hero }} </li>?不要忘記* ngFor中的主要星號（*）。 這是語法的重要組成部分。 有關更多信息，請參閱模板語法頁面。
注意ngFor指令中的hero變量; 它是模板輸入變量的一個例子。 在“模板語法”頁面的microsyntax部分閱讀有關模板輸入變量的更多信息。
Angular為列表中的每個項目復制<li>，將hero變量設置為當前迭代中的項目（英雄）。 Angular使用該變量作為雙曲花括號內插的上下文。
在這種情況下，ngFor正在顯示一個列表，但ngFor可以為任何Iterable對象重復項目。
@Component（directives：...）
在模板中使用任何Angular指令之前，您需要將它們列在組件的@Component注解的指令參數中。 您可以單獨列出指令，或者為了方便起見，您可以使用像CORE_DIRECTIVES這樣的組：lib/app_component.dart (directives)
import 'package:angular/angular.dart';@Component(selector: 'my-app',// ···directives: const [CORE_DIRECTIVES], )?
刷新瀏覽器。 現在英雄出現在一個無序的列表中。
為數據創建一個類
應用程序的代碼直接在組件內定義數據，這不是最佳實踐。 但是，在一個簡單的演示中，沒關系。
目前，綁定是一個字符串列表。 在實際應用中，大多數綁定是針對更專業化的對象。
要將此綁定轉換為使用專用對象，請將英雄名稱列表轉換為Hero對象列表。 為此，你需要一個Hero類。
使用下面的代碼在名為lib的文件夾中創建一個hero.dart新文件：lib/src/hero.dart
class Hero {final int id;String name;Hero(this.id, this.name);@overrideString toString() => '$id: $name'; }您已經使用構造函數，兩個屬性（id和name）和toString（）方法定義了一個類。
使用Hero類
導入Hero類后，AppComponent.heroes屬性可以返回一個Hero對象的類型列表：lib/app_component.dart (heroes)
List<Hero> heroes = [new Hero(1, 'Windstorm'),new Hero(13, 'Bombasto'),new Hero(15, 'Magneta'),new Hero(20, 'Tornado') ]; Hero get myHero => heroes.first;接下來，更新模板。 此刻它顯示英雄的id和name。修正這個問題，只顯示英雄的name屬性。
lib/app_component.dart (template)
template: '''<h1>{{title}}</h1><h2>My favorite hero is: {{myHero.name}}</h2><p>Heroes:</p><ul><li *ngFor="let hero of heroes">{{ hero.name }}</li></ul> ''',顯示看起來一樣，但代碼更清晰。
用NgIf進行條件顯示
有時候，只有在特定情況下，應用程序才需要顯示視圖或視圖的一部分。
如果有三個以上的英雄，讓我們更改示例以顯示一條消息。
Angular ngIf指令根據布爾條件插入或刪除一個元素。 要看到它的實際操作，請在模板的底部添加以下段落：lib/app_component.dart (message)
<p *ngIf="heroes.length > 3">There are many heroes!</p>不要忘記* ngIf中的星號（*）。 這是語法的重要組成部分。 在“模板語法”頁面的ngIf部分閱讀有關ngIf和*的更多信息。
雙引號內的模板表達式，* ngIf =“heros.length> 3”，看上去和表現很像Dart。 當組件的英雄列表中有三個以上的項目時，Angular會將該段落添加到DOM，并顯示消息。 如果有三個或更少的項目，Angular會忽略該段落，所以不會顯示任何消息。 有關更多信息，請參閱模板語法頁面的模板表達式部分。
Angular沒有顯示和隱藏消息。 它正在添加和刪除DOM中的段落元素。 這可以提高性能，特別是在大型項目中，當有條件地包含或排除大量的HTML與許多數據綁定。
試試看。 由于列表中有四個項目，所以應該顯示消息。 回到app_component.dart并刪除或注釋掉英雄列表中的一個元素。 瀏覽器應該自動刷新，消息應該消失。
概要
現在你知道如何使用：
- 用雙花括號插入來顯示組件屬性。
- ngFor顯示項目列表。
- Dart類，用于為您的組件生成模型數據并顯示該模型的屬性。
- ngIf有條件地顯示基于布爾表達式的HTML塊。
這是最后的代碼：
lib/app_component.dart (heroes)
import 'package:angular/angular.dart'; import 'src/hero.dart'; @Component(selector: 'my-app',template: '''<h1>{{title}}</h1><h2>My favorite hero is: {{myHero.name}}</h2><p>Heroes:</p><ul><li *ngFor="let hero of heroes">{{ hero.name }}</li></ul><p *ngIf="heroes.length > 3">There are many heroes!</p>''',directives: const [CORE_DIRECTIVES], ) class AppComponent {final title = 'Tour of Heroes';List<Hero> heroes = [new Hero(1, 'Windstorm'),new Hero(13, 'Bombasto'),new Hero(15, 'Magneta'),new Hero(20, 'Tornado')];Hero get myHero => heroes.first; }lib/src/hero.dart?
class Hero {final int id;String name;Hero(this.id, this.name);@overrideString toString() => '$id: $name'; }web/main.dart?
import 'package:angular/angular.dart'; import 'package:displaying_data/app_component.dart'; void main() {bootstrap(AppComponent); }web/index.html
<!DOCTYPE html> <html><head><script>// WARNING: DO NOT set the <base href> like this in production!// Details: https://webdev.dartlang.org/angular/guide/router(function () {var m = document.location.pathname.match(/^(\/[-\w]+)+\/web($|\/)/);document.write('<base href="' + (m ? m[0] : '/') + '" />');}());</script><title>Displaying Data</title><link rel="stylesheet" href="styles.css"><link rel="icon" type="image/png" href="favicon.png"><script defer src="main.dart" type="application/dart"></script><script defer src="packages/browser/dart.js"></script></head><body><my-app>Loading...</my-app></body> </html>pubspec.yaml
name: displaying_data description: Displaying Data version: 0.0.1 environment:sdk: '>=1.24.0 <2.0.0' dependencies:angular: ^4.0.0 dev_dependencies:browser: ^0.10.0dart_to_js_script_rewriter: ^1.0.1 transformers: - angular:entry_points: web/main.dart - dart_to_js_script_rewriter下一節
轉載于:https://my.oschina.net/u/3647851/blog/1584821
總結
以上是生活随笔為你收集整理的AngularDart4.0 指南- 显示数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 『Python』__getattr__(
- 下一篇： 04-老马jQuery教程-DOM节点操