在 Angular 中呈现数据的最佳方法是什么？
What is the best approach to render data in Angular?
我在数组中有多个 post 数据。我想渲染每个 post。
有两种渲染方法：
1: 创建一个可重用组件并在*ngFor
中多次调用它
<div *ngFor="let post of posts">
<render-post [post]="post"><render-post>
</div>
2：创建一个组件，并在组件内部传递数组
<div>
<render-post [posts]="posts"></render-post>
</div>
越碎越好。
我会整天选择第一个。
它与单一职责原则相呼应，每个组件都必须具有独特的职责并做好它。 RenderPostComponent一定是渲染一个post的方式，而且一定要做好。您仍然可以创建另一个组件，它是前一个组件的父组件，它可以是 RenderPostListComponent，它将包含您的 *ngFor 并将获取参数数组。
所以你的最终解决方案是两种解决方案的混合。
RenderPostListComponent 模板
<div *ngFor="let post of posts">
<render-post [post]="post"><render-post>
</div>
RenderPostListComponent 模板的父级
<div>
<render-post-list [posts]="posts"></render-post-list>
</div>
我在数组中有多个 post 数据。我想渲染每个 post。 有两种渲染方法：
1: 创建一个可重用组件并在*ngFor
中多次调用它 <div *ngFor="let post of posts">
<render-post [post]="post"><render-post>
</div>
2：创建一个组件，并在组件内部传递数组
<div>
<render-post [posts]="posts"></render-post>
</div>
越碎越好。
我会整天选择第一个。
它与单一职责原则相呼应，每个组件都必须具有独特的职责并做好它。 RenderPostComponent一定是渲染一个post的方式，而且一定要做好。您仍然可以创建另一个组件，它是前一个组件的父组件，它可以是 RenderPostListComponent，它将包含您的 *ngFor 并将获取参数数组。
所以你的最终解决方案是两种解决方案的混合。
RenderPostListComponent 模板
<div *ngFor="let post of posts">
<render-post [post]="post"><render-post>
</div>
RenderPostListComponent 模板的父级
<div>
<render-post-list [posts]="posts"></render-post-list>
</div>