Question

我想创建一个包含以下数组的网格：

[
  [ 'a', 'b', 'c' ],
  [ 'd', 'e', 'f' ],
  [ 'g', 'h', 'i' ]
]

这样我有一个显示它们的网格，如：

| a | b | c |
| d | e | f |
| g | h | i |

但是我似乎无法正常工作。

这是我到目前为止拥有的stackblitz

HTML：

<div class="container">
  <div class="row" *ngFor="let row of data">
    <div class="item" *ngFor="let item of row">{{item}}</div>
  </div>
</div>

Answer 1

尝试使用这样的表

<table>
  <tr *ngFor="let row of data">
    <td *ngFor="let item of row">
          <div class="item" >{{item}}</div>
    </td>
  </tr>
</table>

Answer 2

要获得预期结果，请使用以下使用索引的选项
1.首先按数据循环并使用let i = index
2.在第二个循环中，也使用数据代替行，并使用item [i]

    <div class="container">
      <div class="row" *ngFor="let row of data; let i = index">
        <div class="item" *ngFor="let item of data">{{item[i]}}</div>
      </div>
    </div>

工作代码-https://stackblitz.com/edit/grid-test-new-znetmq?file=src/app/app.component.html

Answer 3

使用当前代码，您正在将行呈现为“ grid”元素的子级。结果是

|row1|row2|row3|
|row1|row2|row3|
|row1|row2|row3|

这就是为什么a，b和c在第一列中呈现的原因。 CSS网格尤其擅长实现2D布局，即实际上不需要行。为实现所需的结果，您可以例如添加

.row {
  display: contents;
}

这将使CSS逻辑应用“ .item”元素，因为它们是“ .container”的直接子元素。另一个Angular选项是在ng-content元素内渲染行，如下所示：

<ng-content *ngFor="let row of data">
....

ng-content元素是辅助角度元素，不会在结果标记中呈现。或者，您可以像使用网格一样简单地使用flex或float

从带有angular和css的数组数组创建自定义网格

3 个答案: