Angular 2 数据显示

原创

陈不成i

修改于 2021-07-26 18:07:09

2.4K0

修改于 2021-07-26 18:07:09

文章被收录于专栏：ops技术分享

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

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

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

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

以下代码基于 Angular 2 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];
}

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

angularjs