有效地将 *ngFor 与网格 CSS 结合使用
using *ngFor with grid CSS effectively
我想根据未知行生成网格。网格很简单,只有两列。一列包含行标签,另一列包含一些 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>
只有一种干净的方法可以处理任何布局,即 flexbox 布局。
我尝试并喜欢这两种解决方案
- Angular Flex布局,超级丰富的实现和简单易用的api https://github.com/angular/flex-layout
你也可以在这里看到可能性 https://tburleson-layouts-demos.firebaseapp.com/#/docs
2-Bootstrap网格系统https://getbootstrap.com/docs/4.0/layout/grid/
这不是一个简短的答案,但如果您采用其中任何一个,您将永远不必再为布局而苦恼。
干杯!
<div class="container-fluid">
<div class="row"
*ngFor="let row of rows;let i = index;">
<div class="d-flex align-items-center justify-content-xxxx">
<label for="cb{{i}}">some label</label>
<input id="cb{{i}}"
type="checkbox">
</div>
</div>
</div>
您可以将 bootstrap CSS 与 html 元素一起使用,例如
<section>
<div class="row bg-light" *ngFor="let row of Rows">
<div class="col-md-3 border cursor-action">
<label>
<b>{{row.label}}</b>
</label>
</div>
<div class="col-md-3 border cursor-action">
<input type="checkbox">
</div>
</div>
</section>
希望对您有所帮助
这就是如何有效地将 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.
然后用 display: grid;
和 div 包围 ng-container
。然后,您可以使用 grid-template-columns
规则来定义所需的列数。网格将自动放置行。检查下面的示例代码。
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 */
}
我想根据未知行生成网格。网格很简单,只有两列。一列包含行标签,另一列包含一些 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>
只有一种干净的方法可以处理任何布局,即 flexbox 布局。
我尝试并喜欢这两种解决方案
- Angular Flex布局,超级丰富的实现和简单易用的api https://github.com/angular/flex-layout 你也可以在这里看到可能性 https://tburleson-layouts-demos.firebaseapp.com/#/docs
2-Bootstrap网格系统https://getbootstrap.com/docs/4.0/layout/grid/
这不是一个简短的答案,但如果您采用其中任何一个,您将永远不必再为布局而苦恼。
干杯!
<div class="container-fluid">
<div class="row"
*ngFor="let row of rows;let i = index;">
<div class="d-flex align-items-center justify-content-xxxx">
<label for="cb{{i}}">some label</label>
<input id="cb{{i}}"
type="checkbox">
</div>
</div>
</div>
您可以将 bootstrap CSS 与 html 元素一起使用,例如
<section>
<div class="row bg-light" *ngFor="let row of Rows">
<div class="col-md-3 border cursor-action">
<label>
<b>{{row.label}}</b>
</label>
</div>
<div class="col-md-3 border cursor-action">
<input type="checkbox">
</div>
</div>
</section>
希望对您有所帮助
这就是如何有效地将 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.
然后用 display: grid;
和 div 包围 ng-container
。然后,您可以使用 grid-template-columns
规则来定义所需的列数。网格将自动放置行。检查下面的示例代码。
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 */
}