有效地使用 *ngFor 和网格 CSS

Posted 2023-03-05

【中文标题】有效地使用 *ngFor 和网格 CSS

【英文标题】：using *ngFor with grid CSS effectively

【发布时间】：2020-05-13 03:02:47

【问题描述】：

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

【参考方案1】：

只有一种干净的方法可以处理任何布局，即 flexbox 布局。

我尝试并喜欢这两种解决方案

Angular Flex布局，超丰富的实现和易用的apihttps://github.com/angular/flex-layout 您还可以在这里查看可能性https://tburleson-layouts-demos.firebaseapp.com/#/docs

2- 引导网格系统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="cbi">some label</label>
      <input id="cbi"
             type="checkbox">
    </div>
  </div>
</div>

【讨论】：

感谢您的提示。我仍然希望回答我的问题或更详细地回答为什么无法执行 'CLEANLY' 。

“只有一个”这句话不准确。然而 flex 是其中最被采用的一种。

@Keegan 当你在企业级应用程序上工作时，你最不想要的就是不一致，我在我的小经验中注意到开发人员倾向于编写大量 CSS 来创建简单的布局，我的角色永远不要为布局编写 CSS 代码，当你必须这样做时，你自己知道有些事情是不对的，并且会为此付出代价，像 Angular Flex 布局这样的库如果使用得当，它会大大减少项目中的 CSS，消除不一致和意外的布局行为，特别是在需要响应式设计时。

【参考方案2】：

您可以将引导 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>

希望对你有帮助

【参考方案3】：

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

Angular ng-container 是一个不会干扰样式或布局的分组元素，因为 Angular 不会将它放入 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 */