Выровнять списки по вертикали под несколькими заголовками

Question

Я работаю angular, и мне нужно создать это: .

До сих пор я мог просто создавать «заголовки» в той же «строке», но теперь мне нужно показать список под каждым header. Я получу data для показа под Reattempt, Returned и Delivered. Но я не знаю, как я могу выровнять список под каждым header.

У меня будет три разных arrays в трех разных переменных. Итак, как я могу показать список под каждым заголовком? Кроме того, я не очень хорошо разбираюсь в развитии внешнего интерфейса, поскольку это не моя область знаний.

Вот что я делаю, чтобы показать headers в row

<div fxLayout="row" fxLayoutAlign="space-evenly center">
    <div *ngFor = "let item of statuses">
        <h1>{{item.header}}</h1>
    </div>
</div>

Я не знаю не знаю, что мне нужно делать дальше. Ваша помощь будет высоко ценится.

Answer 1

Я бы добавил элементы списка в ваш массив статусов:

statuses[0].list = reattemptList;
statuses[1].list = returnedList;
// etc.

<div fxLayout="row" fxLayoutAlign="space-evenly center">
    <div *ngFor = "let item of statuses">
        <h1>{{item.header}}</h1>
        <div class="list-items">
          <div *ngFor = "let listItem of item.list">
             // Here you do something with your list items
             // {{listItem.name}}
          </div>
        </div>
    </div>
</div>