在 Angular 中最典型的数据显示方式，就是把 HTML 模板中的控件绑定到 Angular 组件的属性。
1.使用插值表达式显示组件属性
在Angular中需要显示组件的属性，最简单，最直接的方式就是使用插值表达式 (interpolation) 来绑定属性名，要使用插值表达式，就把属性名包裹在双花括号里放进视图模板。
比如有一个组件demo，有自己的类文件DemoComponent，在类文件中有一个属性：title
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
title = 'demoShowData';
constructor() {
}
ngOnInit() {
}
}
这个时候，需要将title这个属性利用插值表达式显示在视图文件demo.html
<p>
{{title}}
</p>
然后运行之后显示的页面：
<body>
<app-root></app-root>
</body>这个过程中，Angular 自动从组件中提取 title 属性的值，并且把这些值插入浏览器中。当这些属性发生变化时，Angular 就会自动刷新显示，这里所说的属性发生变化是指：某些与视图有关的异步事件之后发生的，例如，按键、定时器完成或对 HTTP 请求的响应。
在上面这个过程中，Angular替我们创建了一个DemoComponent的实例，在哪创建的呢？
注意： @Component 装饰器中指定的 CSS 选择器 selector，它指定了一个叫 <app-root> 的元素。 该元素是 index.html 文件里的一个占位符，打开Index.html
<body>
<app-root></app-root>
</body>当你通过 main.ts 中的 AppComponent 类启动时，Angular 在 index.html 中查找一个 <app-root> 元素， 然后实例化一个 AppComponent，并将其渲染到 <app-root> 标签中。然后在AppComponent中，有<app-demo></app-demo>标签，然后Angular会自动的帮助我们实例化一个DemoComponent。
在AppComponent.html中：
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<app-demo></app-demo>
2.是否使用内联模版？
在Angular中有两个地方可以写模版代码，即html
第一个地方，在组件的@Component的template的属性，把模版定义为内联，前面的demo就可以这样写：
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
// templateUrl: './demo.component.html',
template: `
<p>
{{title}}
</p>
`,
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
title = 'demoShowData';
constructor() {
}
ngOnInit() {
}
}
第二个地方，将模版代码写在一个独立的html文件中，然后通过@Component的templateUrl属性连接到这个独立的html文件中，前面的demo文件就可以这样写：
类文件：DemoComponent.ts
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
title = 'demoShowData';
constructor() {
}
ngOnInit() {
}
}
模版文件：DemoComponent.html
<p>
{{title}}
</p>
那具体使用哪一个比较好呢？这个取决于个人喜好、具体状况和组织级策略。 个人建议：当模版很小，并且没有额外的HTML文件时，使用内联，其他情况使用独立的HTML。
但是：无论用哪种风格，模板数据绑定在访问组件属性方面都是完全一样的。
在默认情况下，使用命令：
ng generate component componentName创建的组件都带有模版文件，如果想使用内联的模版，则使用命令：
ng generate component componentName -it3.使用哪种方式进行变量的初始化数据？
在Angular中可以使用两种方式：
a.变量赋值初始化：
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
title = 'demoShowData';
constructor() {
}
ngOnInit() {
}
}
b.利用构造函数进行变量的初始化
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
title: string;
constructor() {
this.title = 'demoShowData';
}
ngOnInit() {
}
}
注意：为了使应用更加简短，应该使用：变量赋值初始化。
4.使用 ngFor 显示数组属性
在实际项目中，经常会遇到要在页面上显示一个数组这样的需求，在Angular中可以利用ngFor指令来显示数组中的每一个元素；
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
title = 'demoShowData';
showDataList = ['showData1', 'showData2', 'showData3', 'showData4'];
constructor() {
}
ngOnInit() {
}
}
将showDataList这个数组中的每个元素显示在页面上。如下:
<p>
{{title}}
</p>
<ul>
<li *ngFor="let showData of showDataList">{{showData}}</li>
</ul>
保存刷新的页面为：
这样就将一个数据中的数据显示在了页面上；
注意：*ngFor 中的 * 不能丢了
5.通过 NgIf 进行条件显示
有时候有些数据只有在特定的情况下显示的，这个时候就会用到*ngIf这个指令，比如说：当showDataList数组的长度大于3的时候，显示一条信息：“数据长度超过了3”，修改DemoComponent.html文件如下：
<p>
{{title}}
</p>
<ul>
<li *ngFor="let showData of showDataList">{{showData}}</li>
</ul>
<h4 *ngIf="showDataList.length>3">数据长度超过了3</h4>
此时由于showDataList的长度为4，showDataList.length>3这个条件的结果是true，所以页面会显示：数据长度超过了3，即如下图：
此时修改一下DemoComponent.ts文件，删掉showDataList中的两个数据，即：
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
title = 'demoShowData';
showDataList = ['showData1', 'showData2'];
constructor() {
}
ngOnInit() {
}
}
此时由于showDataList的长度为2，showDataList.length>3这个条件的结果是false，所以页面不会显示：数据长度超过了3，即如下图：
