时间戳

首页 > 解决方案 > 使用 ngModelGroup 而不重复 div 标签

angular - 使用 ngModelGroup 而不重复 div 标签

问题描述

我有一个看起来像这样的表格（请注意，这只是一个示例）：

<input type="checkbox">
<input type="text"><br>

<input type="checkbox">
<input type="text"><br>

<input type="checkbox">
<input type="text">

的ngModelGroup所有text领域是request。的ngModelGroup所有checkbox领域是important。

为了实现我的目标，我可能会做这样的事情：

<div ngModelGroup="important">
  <input type="checkbox">
</div>  
<div ngModelGroup="request">
  <input type="text"><br>
</div>

<div ngModelGroup="important">
  <input type="checkbox">
</div>  
<div ngModelGroup="request">
  <input type="text"><br>
</div>

<div ngModelGroup="important">
  <input type="checkbox">
</div>  
<div ngModelGroup="request">
  <input type="text"><br>
</div>

好吧，这不是最好的解决方案。有没有办法在不多次打开和关闭 div 标签的情况下做到这一点？

如果我可以只创建一次 div 标签并使用属性来分配它们，那就太好了。那可能吗？

标签： angular

解决方案

更新：

一般来说，您可以使用此方法。您可以在 ts 文件中添加一个变量作为对象数组并对其进行循环。

tableData = [{
  rowClass: 'my-row-class1',
  colClass: 'my-col-class1',
  value: 'myValue1'
},
{
  rowClass: 'my-row-class2',
  colClass: 'my-col-class2',
  value: 'myValue2'
},
{
  rowClass: 'my-row-class3',
  colClass: 'my-col-class3',
  value: 'myValue3'
}];

然后在模板中：

<ng-container *ngFor="let data of tableData">
    <row [ngClass]="data.rowClass">
      <col [ngClass]="data.colClass">
        {{data.value}}
      <col>
    </row>
  </ng-container>

旧答案

您可以使用NgFor循环。虽然它需要一个数组来循环，但您可以像这样使用它：

<ng-container *ngFor="let i of [].constructor(3)">
  <div ngModelGroup="important">
    <input type="checkbox">
  </div>  
  <div ngModelGroup="request">
    <input type="text"><br>
  </div>
</ng-container>

如果您需要为每个组设置特定的属性，您可以在 ts 文件中初始化一个数组，并在 NgFor 的模板中使用来循环它们。

注意：使用不带变量的 NgFor 进行迭代取自此处

推荐阅读