Для отображения данных массива в виде списка

Question

Я отображаю данные i, e month, name, time из массива с именем Batch. Как показано на рисунке ниже.

Предположим, если я добавлю больше данных в массив (Пакет). Это для отображения новых данных один под другим, как это

Вот ссылка на разветвленную stackblitz . Как я могу это сделать?

Answer 1

Вместо создания трех ngFor циклов для отображения каждого свойства используйте один ngFor, но для родительского элемента. Примерно так .

Answer 2

использовать *ngFor один раз в родительском div

Stackblitz

<div>
  <h2 class="ylet-primary-500 alignleft">Sessions</h2>
  <p class="alignright"><mat-icon class="ylet-primary-500">add_circle_outline</mat-icon></p>
</div>
<div style="clear: both;"></div>

<div *ngFor="let batch of batches">
<div>
  <h3 class="classes"  >{{batch.month}}
    <span class="chips">


    </span>
  </h3>
  <p class="ylet-primary-500 booking"><a>Book now</a></p>
</div>
<div style="clear: both;">
  <p class="timings">
    <mat-icon matPrefix>access_time</mat-icon><span >{{batch.time}}</span>
     <span class="slots" > <mat-icon>list_alt</mat-icon>{{batch.slots}}</span>
  </p>
</div>
</div>