AngularDart4.0 指南- 显示数据 顶

您可以通过将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);
  @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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

你可以从面试中学到什么?

讲一下我对面试的一些。。。“偏见”,哈哈,熟悉我的同学们一定要批判的读接下来的内容哈。

11800
来自专栏华章科技

穿越十年后看互联网+:家电行业的金矿在哪里?

现在市场上炒得火热的智能家居未来出路在何方?做智能家居的创业者应该注意哪些机会?传统家电厂商又到底如何借助互联网进行转型?本文以智能空调为例,用故事的形式,提前...

8210
来自专栏非著名程序员

「我真的没有改需求」

11610
来自专栏腾讯NEXT学位

今天我就说三句话

11220
来自专栏Ken的杂谈

【系统设置】CentOS 修改机器名

17430
来自专栏haifeiWu与他朋友们的专栏

复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

26840
来自专栏前端桃园

知识体系解决迷茫的你

最近在星球里群里都有小伙伴说道自己对未来的路比较迷茫,一旦闲下来就不知道自己改干啥,今天我这篇文章就是让你觉得一天给你 25 个小时你都不够用,觉得睡觉都是浪费...

19540
来自专栏FSociety

SQL中GROUP BY用法示例

GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

5.1K20
来自专栏非著名程序员

这是对付产品经理的一副毒药,程序员慎入

程序员和产品经理的日常就像是一对天生的冤家,为了需求的实现,几乎天天在争吵。这不,就在昨天各大技术和产品群里一个程序员暴打产品经理的视频火了,被广泛传播。

11520
来自专栏腾讯大讲堂的专栏

白底黑字or黑底白字,眼睛更喜欢哪一个?

12010

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励