AngularJS2
  • [AngularJS2]AngularJS2 教程
  • [AngularJS2]AngularJS2 JavaScript环境配置
  • [AngularJS2]AngularJS2 TypeScript 环境配置
  • [AngularJS2]AngularJS2 架构
  • [AngularJS2]AngularJS2 数据显示
  • [AngularJS2]AngularJS2 用户输入
  • [AngularJS2]AngularJS2 表单
  • [AngularJS2]AngularJS2 模板语法
  • 直达腾讯云服务器
    腾讯云服务器,数据库,短信等热销产品限量秒杀;新购爆款3折起;
    腾讯云数据库MySQL入门机型仅12元/月
    腾讯云云服务器新购特惠,最低2折起,1核1G3年仅794.73元,即0.73元/日。
    腾讯云国际顶级CA机构SSL证书8.8折,云解析买一年最高送半年!
    腾讯云为数百万企业和开发者提供安全、稳定的云服务器、云数据库、CDN等云服务
    腾讯云服务器安全可靠高性能,多种配置供您选择
    腾讯云数据库性能卓越稳定可靠,为您解决数据库运维难题
    阿里云服务器入口
    180天免费用腾讯云服务器马上领取
    您当前位置:狗鱼MySQL教程 >> javaScript >> AngularJS2 >> AngularJS2 数据显示
    AngularJS2 数据显示
    更新日期: 2017年07月23日 来源: 本站原创 作者: 佚名 阅读:
    上一篇AngularJS2 架构 下一篇:AngularJS2 用户输入

    angularjs2 数据显示

    本章节我们将为大家介绍如何将数据显示到用户界面上,可以使用以下三种方式:

    • 通过插值表达式显示组件的属性
    • 通过 NgFor 显示数组型属性
    • 通过 NgIf 实现按条件显示

    通过插值表达式显示组件的属性

    要显示组件的属性,插值是最简单的方式,格式为:{{属性名}}

    以下代码基于 AngularJS2 TypeScript 环境配置 来创建,你可以再该章节上下载源码,并修改以下提到的几个文件。

    app/app.component.ts 文件:

    import { Component } from '@angular/core';
    @
    Component({
    selector: 'my-app', template: `
    <
    h1>{{title}}</h1>
    <
    h2>我喜欢的网站: {{mySite}}</h2> ` })
    export class AppComponent {
    title = '站点列表';
    mySite = '教程'; }

    Angular 会自动从组件中提取 title 和 mySite 属性的值,并显示在浏览器中,显示信息如下:

    站点列表
    教程

     

    注意:模板是包在反引号 (`) 中的一个多行字符串,而不是单引号 (')。


    使用 ngFor 显示数组属性

    我们也可以循环输出多个站点,修改以下文件:

    app/app.component.ts 文件:

    import { Component } from '@angular/core';
    @
    Component({ selector: 'my-app', template: `
    <
    h1>{{title}}</h1>
    <
    h2>我喜欢的网站: {{mySite}}</h2>
    <
    p>网站列表:</p>
    <
    ul>
    <
    li *ngFor="let site of sites"> {{ site }}
    </
    li>
    </
    ul> ` })
    export class AppComponent {
    title = '站点列表';
    sites = ['教程', 'Google', 'Taobao', 'Facebook'];
    mySite = this.sites[0]; }

    代码中我们在模板使用 Angular 的 ngFor 指令来显示 sites 列表中的每一个条目,不要忘记 *ngFor 中的前导星号 (*) 。。

    修改后,浏览器显示如下所示:
    站点列表
    教程
     网站列表:
    教程
    '
     Google
     Taobao'
    Facebook
     

     

    实例中 ngFor 循环了一个数组, 事实上 ngFor 可以迭代任何可迭代的对象。

    接下来我们在 app 目录下创建 site.ts 的文件,代码如下:

    app/site.ts 文件:

    export class Site { constructor(
    public id: number,
    public name: string) { }
    }

    以上代码中定义了一个带有构造函数和两个属性: id 和 name 的类。

    接着我们循环输出 Site 类的 name 属性:

    app/app.component.ts 文件:

    import { Component } from '@angular/core';
    import { Site } from './site';
    @
    Component({
    selector: 'my-app', template: `
    <
    h1>{{title}}</h1>
    <
    h2>我喜欢的网站: {{mySite.name}}</h2>
    <
    p>网站列表:</p>
    <
    ul>
    <
    li *ngFor="let site of sites"> {{ site.name }}
    </
    li>
    </
    ul>
    `
    })
    export class AppComponent {
    title = '站点列表';
    sites = [ new Site(1, '教程'),
    new Site(2, 'Google'),
    new Site(3, 'Taobao'),
    new Site(4, 'Facebook') ];
    mySite = this.sites[0]; }

    修改后,浏览器显示如下所示:

     


    通过 NgIf 进行条件显示

    我们可以使用 NgIf 来设置输出指定条件的数据。

    以下实例中我们判断如果网站数 3 个以上,输出提示信息:修改以下 app.component.ts 文件,代码如下:

    app/app.component.ts 文件:

    import { Component } from '@angular/core';
    import { Site } from './site';
    @
    Component({ selector: 'my-app', template: `
    <
    h1>{{title}}</h1>
    <
    h2>我喜欢的网站: {{mySite.name}}</h2>
    <
    p>网站列表:</p>
    <
    ul>
    <
    li *ngFor="let site of sites"> {{ site.name }} </li>
    </
    ul>
    <
    p *ngIf="sites.length > 3">你有很多个喜欢的网站!</p> ` })
    export class AppComponent {
    title = '站点列表';
    sites = [
    new Site(1, '教程'),
    new Site(2, 'Google'),
    new Site(3, 'Taobao'),
    new Site(4, 'Facebook') ];
    mySite = this.sites[0]; }

    修改后,浏览器显示如下所示,底部多了个提示信息:

     

     

    感觉本站内容不错,读后有收获?

    我要小额赞助,鼓励提供更好的内容教程

    上一篇AngularJS2 架构 下一篇:AngularJS2 用户输入
    Copyright 2013-2017 Powered by 狗鱼MySQL教程,All Rights Reserved.
    广州相如计算机科技有限有限公司 版权所有 粤ICP备08130661号-4
    售前咨询:020-38667011 手机:13711588918