Какой компонент будет правильным

Question

Здравствуйте, я создаю небольшое приложение, которое подключается к API через Nodejs и хранит все сообщения в mongodb, с этой частью все в порядке. Я уже выполнил ее, НО теперь мне нужно сделать часть интерфейса, на которой должен быть пользовательЯ могу видеть страницу со списком сообщений, которые я сохранил в базе данных, и теперь мне трудно работать с таблицей или использовать список?Я спрашиваю это bcs, если вы посмотрите на картинку, вы увидите, что в каждой строке есть заголовок автора и справа ? дата плюс, если вы наводите строку, должна появиться кнопка удаления ... Так что я ищупредложения я должен использовать список или таблицу и, что более важно, как я могу настроить каждую строку, чтобы я мог поставить название автора и дату, как на картинке?Последнее, но не менее важное, это нужно сделать в интерфейсе Angular Material или React + Material. каркасное веб-изображение

Answer 1

Не пытайтесь уместить это на столе. Вместо этого создайте отдельный компонент, представляющий сообщение, что-то вроде PostComponent, которое принимает как @Input() сообщение, а затем в родительском компоненте, где вы получаете массив сообщений, используйте что-то вроде этого в своем шаблоне:

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

Теперь, для макета, я предлагаю использовать встроенный display:grid, который, похоже, будет работать для ваших нужд.

Answer 2

В зависимости от вашего каркаса вы можете легко получить список. Примените соответствующие стили к вашим HTML-компонентам, и вы сможете добиться этого. Угловое связывание данных поможет вам удалить конкретный объект (строку) из списка.

Вы можете получить представление об этой документации. https://material.angular.io/components/list/overview

Но имейте в виду, что использование таблицы также является одним из решений, но в соответствии с каркасом это необязательно, так как кажется, что это всего лишь некоторые динамические строки.