如何将数组显示为带有属性线的矩阵答案

【问题标题】：How to display an array as a matrix with property line如何将数组显示为带有属性线的矩阵
【发布时间】：2020-09-26 04:21:34
【问题描述】：

我正在使用 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>

【问题讨论】：

这不是有效的 JSON，你错过了方括号吗？
还有无效的 html（没有结束 div 标签）和无效的第二个 ngFor 指令

标签： html json angular typescript

【解决方案1】：

您可以使用 Angular Flex 布局来对齐行或列中的内容 (https://github.com/angular/flex-layout)。

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>

【讨论】：