将数组数据显示为列表

Question

我正在显示来自名为Batch的数组的数据，即月份，名称，时间。 如下图所示。

假设我向数组（Batch）中添加了更多数据。这样将新数据一个显示在另一个下面

这是分叉的stackblitz链接。我该怎么做？

Answer 1

与其创建三个ngFor循环来显示每个属性，不如在父元素上使用一个ngFor。 Something like this。

Answer 2

在父div中一次使用*ngFor

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>