在页面上显示的这组内容列表是在 Post 组件里要显示的东西。回到项目，打开 Post 组件的视图，这里这个 post works 可以删除掉 .. 这样界面上就不会再显示这个段落文字了。

应用里的 Post 组件，里面渲染了一组内容列表，现在我想把列表项目单独放在一个组件里。在终端给项目生成一个组件，ng generate 一个 component ，放在 modules/post/components 里面，名字是 post-item 。

回到项目，先打开 Post 组件的模板文件，剪切一下 ul 元素里包装的这个 li 元素，这里可以换成刚才我们创建的 app-post-item 组件。

打开 PostItem 组件的模板文件，把刚才剪切的视图粘贴到这里，去掉 li 元素上的 ngFor 指令。这个组件里需要一个 entity 数据，它的值应该就是要显示的内容，里面有 title 还有 body 属性。

这个 entity 数据要在使用了 PostItem 组件的父辈那里绑定。打开 PostItem 组件，在组件里要添加一个 Input 属性，用一下 @Input 这个装饰器，它来自 @angular/core 这个包。

装饰的属性的名字可以是 entity，这样在使用这个组件的时候，可以给这个组件绑定一个 entity 属性。

属性的值的类型可以再设置一下，在 post 目录里面，新建一个 models 目录，里面添加一个 post.model.ts ，在这个文件里 export 一个 class ，名字叫 Post ，在类里添加一个构造方法，里面添加两个参数属性。public title ，类型是 string，public body，类型也是 string 。

回到 PostItem 组件，设置一下 entity 这个属性的类型，可以用一下 Post，这个东西来自刚才我们定义的 Post 类。

然后打开 Post 组件，在这个组件里用了一下 PostItem 组件，在组件上用一个 *ngFor，循环一下 Post 组件里的 entities 这组数据， let entity of entities。

PostItem 组件的模板里需要 entity 数据，这个属性我们已经在 PostItem 里面设置成了一个 Input 属性，所以在这里可以绑定一个 entity 属性，它的值就是每次循环的时候当前项目的名字，也就是 entity 。

回到浏览器再预览一下，现在页面上仍然会显示一组内容列表。