以列表形式显示阵列数据

Question

我正在从名为Batch的数组中显示数据i，e月，名称，时间。如下图所示。

假设我向阵列添加更多数据（批处理）。就像这样一个在另一个之下显示新数据

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

Answer 1

在父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>

Answer 2

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