1.5. Angular 2 data display

发布时间 ： 2025-10-25 13:32:28 UTC      

Page Views: 1696 views

In this section, we will show you how to display data on the user interface in three ways:

  • Display the properties of a component through an interpolation expression

  • Pass through NgFor show array type properties

  • Pass through NgIf achieve conditional display

1.5.1. Display the properties of a component through an interpolation expression

Interpolation is the easiest way to display the properties of a component in the format {{property name}}.

The following code is created based on the Angular 2 TypeScript environment configuration, where you can download the source code and modify the files mentioned below.

app/app.component.ts file: 

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` 
{{title}}
 
My favorite websites: {{mySite}}
 ` }) export class AppComponent { title = 'Site List'; mySite = 'Rookie Tutorial'; }

Angular will be automatically extracted from the component title and mySite property and is displayed in the browser with the following information

Image0

Note: a template is a multiline string enclosed in backquotes (`), not single quotation marks (‘).

1.5.2. Use ngFor show array properties

We can also loop out multiple sites and modify the following files:

app/app.component.ts file: 

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` 
{{title}}
 
My favorite websites: {{mySite}}
 
Website List:
 
     
  •  {{ site }} 
    •  
 ` }) export class AppComponent { title = 'Site List'; sites = ['Rookie Tutorial', 'Google', 'Taobao', 'Facebook']; mySite = this.sites[0]; }

In the code, we use the template Angular of ngFor instruction to display sites don’t forget every entry in the list \*ngFor leading asterisk (*) in.

After modification, the browser displays as follows:

Image1

In the instance ngFor loops an array, in fact ngFor can iterate over any object that can be iterated.

Next, we are in app create under the directory site.ts , the code isas follows:

app/site.ts file: 

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

One with a constructor and two properties are defined in the above code: id and name the class.

Then we loop the output. Site analogous name attributes:

app/app.component.ts file: 

import { Component } from '@angular/core'; import { Site } from './site'; @Component({ selector: 'my-app', template: ` 
{{title}}
 
My favorite websites: {{mySite.name}}
 
Website List:
 
     
  •  {{ site.name }} 
    •  
 ` }) export class AppComponent { title = 'Site List'; sites = [ new Site(1, 'Rookie Tutorial'), new Site(2, 'Google'), new Site(3, 'Taobao'), new Site(4, 'Facebook') ]; mySite = this.sites[0]; }

After modification, the browser displays as follows:

Image2

1.5.3. Pass through NgIf make conditional display

We can use it. NgIf to set the data that outputs the specified condition.

In the following example, we judge that if there are more than 3 websites, output the prompt message: modify the following app.component.ts file, the code is as follows:

app/app.component.ts file: 

import { Component } from '@angular/core'; import { Site } from './site'; @Component({ selector: 'my-app', template: ` 
{{title}}
 
My favorite websites: {{mySite.name}}
 
Website List:
 
     
  •  {{ site.name }} 
    •  
 
You have many favorite websites!
 ` }) export class AppComponent { title = 'Site List'; sites = [ new Site(1, 'Rookie Tutorial'), new Site(2, 'Google'), new Site(3, 'Taobao'), new Site(4, 'Facebook') ]; mySite = this.sites[0]; }

After modification, the browser displays as follows, with an additional prompt at the bottom:

文章链接 ： 1.5. Angular 2 data display
Web框架  946

《地理信息系统原理、技术与方法》  97

最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。

WEB基础  289