Angular 2数据显示

最新推荐文章于 2021-06-04 20:18:07 发布

大头Sw

最新推荐文章于 2021-06-04 20:18:07 发布

阅读量246

点赞数

CC 4.0 BY-SA版权

文章标签： angular 语法

本文链接：https://blog.youkuaiyun.com/sinat_34153600/article/details/88362498

本文介绍Angular框架中三种数据展示方法：插值表达式显示组件属性，NgFor显示数组，及NgIf实现条件显示。通过实例代码，展示了如何将数据有效地呈现在用户界面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何将数据显示到用户界面上，可以使用以下3种方式：

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

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

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

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

Angular会自动从组件中提取 title 和mySite属性的值，并显示到浏览器中，显示信息为：

2.使用NgFor显示数组属性，如：

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 AppComponeent{
      title = '站点列表';
      sites = ['菜鸟教程','Google','TaoBao','FaceBook']
      mySite = this.sites[0];
}

代码中使用angular的ngFor指令来显示sites列表的每一个条目，不要忘记前面加个*。显示如下：

3.通过NgIf进行条件显示

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

以下实例中我们在判断网站数3个以上，输出提示显示，代码如下：

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>
        <p *ngIf = "sites.length > 3">你有很多个喜欢的网站！</P>
        `
    })
export class AppComponeent{
      title = '站点列表';
      sites = ['菜鸟教程','Google','TaoBao','FaceBook']
      mySite = this.sites[0];
}

注意：ngIf标签中为它的条件，当条件满足时显示，条件不满足时不显示。