html - 在列中正确显示网格中的 JSON 数据

Question

我正在努力正确格式化我的 HTML。

我想使用 json 数据在 html 中显示我的信息，但是在使用时display: grid，我似乎无法以正确的方式输出它。

在我的stackblitz 中，我展示了我希望它的外观以及它目前的样子......

我的问题代码

<div class="grid">
  <div>Car</div>
  <div>Bike</div>
  <mat-checkbox class="boxes" *ngFor="let x of data">{{x.service}}</mat-checkbox>
</div>

CSS

.grid {
  padding: 10px;
  background: lightgray;

  display: grid;
  grid-template-columns: auto auto;
}

JSON

data = [
      {
        "type": "car",
        "service": "speed"
      },
      {
        "type": "car",
        "service": "price"
      },
      {
        "type": "bike",
        "service": "speed"
      },
      {
        "type": "bike",
        "service": "price"
      }
    ]

标签： htmlcssjsonangulartypescript