有效地将 *ngFor 与网格 CSS 结合使用

Question

我想根据未知行生成网格。网格很简单，只有两列。一列包含行标签，另一列包含一些 UI 元素，例如复选框。

我能够完成这项工作的唯一方法是通过每个循环生成一个新网格（参见下面的示例）。我想用一个 ngFor 和一个 Grid 来完成这个。

澄清一下，每个标签必须与它们各自的复选框位于同一行。

例子 ：

    <div *ngFor="let row of rows">
      <div class="popup-grid">
        <div>
          {{row.label}}
        </div>
        <div>
          <p-checkbox  "angular interactions/events here">
          </p-checkbox>
        </div>
      </div>
   </div>

Answer 1

这就是如何有效地将 ngFor 与 CSS 网格一起使用。您可以使用ng-container来防止 *ngFor 将 div 插入到 dom 中。这将防止在每次循环时生成新网格。

Angularng-container是一个不会干扰样式或布局的分组元素，因为 Angular 不会将它放在 DOM 中。

然后ng-container用 div包围display: grid;。然后，您可以使用该grid-template-columns规则来定义所需的列数。Grid 会自动放置行。检查下面的示例代码。

HTML：

<div class="grid">
    <ng-container *ngFor="let row of data">
        <label>{{row}}</label>
        <div><input type="checkbox"></div>
    </ng-container>
</div>

CSS：

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Create 2 columns and auto-place rows */
}