哪个组件是正确的答案

【问题标题】：Which component would be the right one哪个组件是正确的
【发布时间】：2019-10-27 14:08:41
【问题描述】：

您好，我正在构建一个小应用程序，它通过 Nodejs 连接到 api，并将所有帖子存储在 mongodb 中，这部分很好我已经完成了，但是现在我需要做用户应该使用的前端部分能够看到一个页面，其中包含我保存在数据库中的帖子列表，现在让我很难过的是我应该使用表格还是应该使用列表？我问这个bcs，如果你看一下图片，你会看到每一行都有一个作者的标题和右边？？？？日期加上如果你悬停该行删除按钮应该出现......所以我正在寻找我应该使用列表或表格的建议，更重要的是如何调整每一行，以便我可以将标题作者和日期放在图片？最后但同样重要的是，它必须在 Angular Material 或 React + Material UI 中完成。 wireframe web image

【问题讨论】：

任何框架和库都可以。

标签： angular reactjs angular-material frontend material-ui

【解决方案1】：

不要费心试图把它放在桌子上。相反，创建一个代表帖子的单独组件，例如PostComponent，它接受一个帖子作为@Input()，然后在您获取帖子数组的父组件中，在它的模板中使用类似这样的东西：

<ng-container *ngFor='let post of posts>
 <app-post [post]='post'></app-post>
</ng-container>

现在，对于布局，我建议使用内置的display:grid，这似乎可以满足您的需求。

【讨论】：

谢谢你，但是当我使用列表时，行就像：Titleauthordate，我不能像线框中那样分开每一个人
@CarlosDelgado，我创建了一个可以帮助你的堆栈闪电战。我认为它与您的线框（一行）非常相似，并且可能是您的应用程序的起点。 stackblitz.com/edit/angular-8dx5pr

【解决方案2】：

根据您的线框，您可以轻松摆脱列表。将相关样式应用于您的 HTML 组件，您就可以实现这一点。 Angular 数据绑定将帮助您从列表中删除特定对象（行）。

你可以从这个文档中得到一些想法 https://material.angular.io/components/list/overview

但请记住，使用表格也是一种解决方案，但根据线框图，这不是必需的，因为它似乎只是一些动态行。

【讨论】：