javascript - Angular で動的ビューを作成する方法

Question

下の図に示すように、json ファイルから取得したデータを使用して、複数の水平線を動的に作成したいと考えています。 私の試みはそれを行う

Component.html

<div style="text-align: center">
  <div class="flex-items">
    <div *ngFor="let item of timelineObject">
      <h3 class="row text-center">{{ item.data }}</h3>
      <hr id="timeline" />
      <img style="" [src]="item.icon" />
    </div>
  </div>
</div>

コンポーネント.css

.flex-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#timeline {
  display: inline-block;
  margin: auto;
  width: 10vh;
  border: 10px solid blue;
}