Html 如何将数组显示为带有建筑红线的矩阵

我正在用TypeScript写一个应用程序 我使用的JSON数组如下：

data = [{"name":"dog",
        "line":1},
        {"name":"cet",
        "line":1},
        {"name":"red",
        "line":2},
        {"name":"green",
        "line":2},
        {"name":"elephant",
        "line":1}]

我想在HTML页面上安排它，使每个对象都位于其“行”中显示的行中，每个“行”中的所有对象都位于单独的行中

<div *ngFor="let d of data" >
   <div *ngFor="" class= "row">
      <span >{{d.name}}</span>
   <div> 
<div> 

{{d.name}

您可以使用Angular Flex布局对齐行或列中的内容（）

{{d.name}

这不是有效的JSON，是否遗漏了方括号？还有无效的html（无结束div标记）和无效的第二个ngFor指令

data = [
   {"name":"dog",
    "line":1},
    {"name":"cet",
    "line":1},
    {"name":"red",
    "line":2},
    {"name":"green",
    "line":2},
    {"name":"elephant",
    "line":1} ];

<div fxLayout="column">
  <ng-container *ngFor="let d of data">
    <div fxFlex fxLayout="row">
      <span>{{d.name}}</span>
    </div>
  </ng-container>
</div>