AngularDart4.0 指南- 顯示數據

時間  2019-11-18
標籤 angulardart4.0 angulardart 指南 顯示 數據 简体版
原文   原文鏈接

您能夠經過將HTML模板中的控件綁定到Angular組件的屬性來顯示數據。
在這個頁面中，您將建立一個包含英雄列表的組件。 您將顯示英雄名單的列表，並有條件地在列表下方顯示一條消息。
最終的用戶界面以下所示：css

現場示例（查看源代碼）演示了此頁面中描述的全部語法和代碼片斷。html

用插值顯示組件屬性

顯示組件屬性的最簡單方法是經過插值來綁定屬性名稱。 使用插值，能夠將屬性名稱放在視圖模板中，並用雙花括號括起來：{{myHero}}。java

按照設置說明建立名爲displays_data的新項目。git

而後經過更改模板和組件的主體來修改app_component.dart文件。github

當你完成後，它應該是這樣的：lib/app_component.dartweb

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。express

修改後的模板使用雙重大括號插值顯示兩個組件屬性：bootstrap

template: '''
  <h1>{{title}}</h1>
  <h2>My favorite hero is: {{myHero}}</h2>
''',

Angular會自動從組件中抽取title和myHero屬性的值，並將這些值插入到瀏覽器中。 當這些屬性改變時，Angular會更新顯示。api

更準確地說，從新顯示是在與視圖相關的某種異步事件以後發生的，例如按鍵，計時器完成或對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);
  @override
  String 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);
  @override
  String 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.0
  dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular:
    entry_points: web/main.dart
- dart_to_js_script_rewriter

下一節

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程