AngularJS2 data display
In this section we will show you how to display the data to the user interface, you can use the following three ways:
- The properties of the component are displayed by an interpolation expression
- Display array type properties with NgFor
- Realized by NgIf
The properties of the component are displayed by an interpolation expression
To display the properties of a component, interpolation is the easiest way, in the format {{property name}} .
The following code is based on the AngularJS2 TypeScript environment configuration to create, you can then download the source code, and modify the following mentioned several files.
App / app.component.ts file:
Import { Component } from ' @ angular / core ' ; @ Component ( { selector : ' my-app ' ,
template : `< h1 > { { title } } </ h1 > < h2 > My favorite site: { { mySite } } </ H2 > `
} ) export class AppComponent { title = ' site list ' ;
mySite = ' novice tutorial " ;
}
Angular automatically extracts the values of the title and mySite properties from the component and displays them in the browser as follows:
Note: Templates are a multi-line string enclosed in a backquote (`), rather than single quotation marks (').
Use ngFor to display array properties
We can also loop through multiple sites, modify the following files:
App / app.component.ts file:
Import { Component } from ' @ angular / core ' ; @ Component ( { selector : ' my-app ' ,
template : `< h1 > { { title } } </ h1 > < h2 > My favorite site: { { mySite } } </ H2 > < p > List of sites: </ p > < ul > < li * ngFor = "the let Site of sites " >
{ { Site } }
</ Li > </ UL >`
} ) Export class AppComponent { title = ' Site List ' ;
sites = [ ' novice tutorial ' , ' the Google ' , ' Taobao ' , ' facebook ' ] ;
mySite = the this .Sites [ 0 ] ;
}
In the code we use Angular's ngFor command on the template to display each entry in the sites list, and do not forget the leading asterisk (*) in * ngFor. The
After editing, the browser displays as follows:
In the example, ngFor loops an array, and in fact ngFor can iterate over any iterable objects.
Next we create the site.ts file in the app directory, the code is as follows:
App / site.ts file:
Export class Site { constructor ( public id : number ,
public name : string ) { } }
The above code defines a class with a constructor and two attributes: id and name.
Then we loop through the Site class's name attribute:
App / app.component.ts file:
Import { Component } from ' @ angular / core ' ;
import { Site } from ' ./site ' ; @ Component ( { selector : ' my-app ' ,
template : `< h1 > { { title } } </ h1 > < H2 > My favorite site: { { mySite . Name } } </ h2 > < p > List of sites:</ P > < UL > < Li * ngFor = " the let Site of sites " >
{ { Site . Name } }
</ Li > </ UL > `
} ) 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 ] ; }New Site ( 3 , ' Taobao ' ) , new Site ( 4 , ' Facebook ' ) ] ; mySite = this . Sites [ 0 ] ; }New Site ( 3 , ' Taobao ' ) ,
new Site ( 4 , ' Facebook ' ) ] ;
mySite = this . Sites [ 0 ] ; }MySite = this . Sites [ 0 ] ; }MySite = this . Sites [ 0 ] ;
}
After editing, the browser displays as follows:
The condition is displayed by NgIf
We can use NgIf to set the output specified conditions of the data.
In the following example, we determine if the number of sites more than 3, the output 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 : `< h1 > { { title } } </ h1 > < H2 > My favorite site: { { mySite . Name } } </ h2 > < p > List of sites:</ P > < UL > < Li * ngFor = " the let Site of sites " >
{ { Site . Name } }
</ Li > </ UL > < P * ngIf = " sites.length>. 3 " > you have many Like the site! </ P > `
} ) export class AppComponent { title = ' site list ' ;
sites = [ new new Site Five ( . 1 , ' novice tutorial ' ) ,
new new Site Five ( 2 , ' the Google ' ) ,
new new Site Five ( . 3 , ' Taobao ' ) ,
new new Site Five ( . 4 , ' Facebook ' ) ] ;
mySite = the this .Sites [ 0 ] ;
}
After editing, the browser displays the following, the bottom of the more than a message:
