哪个组件是正确的

时间:2019-06-13 02:48:09

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

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

2 个答案:

答案 0 :(得分:1)

不要费心尝试将其放在桌子上。相反,创建代表帖子的单独组件,例如PostComponent,将帖子作为@Input()接受,然后在您的父组件中,您将在其中获取帖子数组的模板中使用类似的内容:

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

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

答案 1 :(得分:0)

根据线框,您可以轻松获得列表。将相关样式应用于HTML组件,就可以实现这一点。角度数据绑定将帮助您从列表中删除特定对象(行)。

您可以从本文档中了解一些想法 https://material.angular.io/components/list/overview

但是请记住,使用表也是一种解决方案,但是根据线框,这是没有必要的,因为看起来只是一些动态行。