在组件的模板里面，可以用一种特别的形式显示组件里的数据。先打开 Post 组件，在这个组件里添加一个属性，名字叫 title，可以直接给它设置一个值，比如 Posts。

在组件的模板里，可以绑定输出组件的 title 这个数据，打开这个组件用的模板文件，post.component.html，去掉里面的东西，添加一组 h3 标签，绑定输出组件的数据的写法是用两组大括号，然后里面是数据的名字，比如 title。

打开浏览器预览一下，你会发现页面上会显示 Post 组件里的 title 属性的值。这个值的周围用了一组 h3 元素包装了一下。

如果组件里的这个 title 的值有变化，Angular 会自动显示变化之后的数据。

*ngFor

再回到 Post 组件，在这个组件里添加一组数据，名字可以叫 entities， 一个数组，数组里添加几个项目，每个项目是一个对象，对象里有个 title 属性，设置一下它的值。继续再添加两个一样结构的数据项目，每个数据项目里面都有一个 title 属性。

打开组件的模板，在这个模板里如果想输出组件里的一组数据，可以用一个 ngFor 指令，先添加一组 ul 元素，里面添加一个 li 元素，在这个元素上，用一下 ngFor 指令，注意前面需要加个 * 号。

它的值可以这样设置一下，let entity of entities，这里的 entities 是组件里的一组数据，前面的这个 entity 是我们给当前项目起的一个名字。ngFor 这个指令会循环 entities 数组。

在这个 li 元素里，先添加一组标题元素 .. 里面绑定输出一个 entity 里的 title 属性的值。因为 entities 里的每个数据项目里面都会包含一个 title 属性。

在浏览器上预览一下，你会发现，页面上会显示出我们在 Post 组件里添加的 entities 这组数据，每个项目都会是一个 li 元素，里面包装的文字就是每个数据项目里的 title 属性的值。

*ngIf

判断条件然后决定是否要显示某些元素，可以用一下 ngIf 这个指令。回到组件，先给 entities 里的数据项目再添加一个 body 属性，随便输入一行文字..

现在 entities 里的这三个数据项目里面，前两个都有 body 属性，只有最后一个数据项目里没有 body 属性。

打开组件的模板文件，在 li 元素里添加一个 p 标签，里面绑定输出一个 entity 的 body 属性。

回到浏览器预览一下，现在显示的数据列表里会包含数据项目的 body 属性的值，不过最后一个数据项目里并没有 body 属性，但是这里仍然输出了一个空白的 p 标签。

回到组件的模板文件，在这个段落标签上，添加一个 *ngIf，判断的条件是 entity 的 body 属性，意思就是，如果 entity 里有 body 属性，就输出这个段落元素，如果没有，就不会输出这个元素。

再去预览一下。这次你会发现，最后一个列表项目里面，没有输出空白的段落标签，因为这个数据项目里面没有 body 属性。