gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 00:59:18 24 4
gpt4 key购买 nike

我想根据未知行生成网格。网格很简单,只有两列。一列包含行标签,另一列包含一些 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>

最佳答案

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

The Angular ng-container is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.



然后包围 ng-container带有 display: grid; 的 div .然后您可以使用 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 */
}

关于html - 有效地将 *ngFor 与网格 CSS 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59936188/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com