Question

如何使用* ngFor在角度中动态创建“ tr”和“ / tr”标签。我使用了以下代码，但是它创建了以下附加的屏幕简短表格，并将tr标签显示为字符串。但是我想在HTML中附加这些标签。在地址数组中，我有td的数据。所以这就是为什么我为* d运行* ngFor的原因。在这里，我只需要使用表格，因为我正在使用角度打印功能。我可以使用div和bootstrap类创建类似的东西，但我的要求是仅表。我必须在td的基础上创建tr，在一个tr中，我必须显示3个tds。

例如，我在printAddresses中有9条记录，那么我想打印3行，每行有3 td。如果printAddresses有14条记录，那么我要打印5行，并且在前4行中将在所有三个td中记录，在第5 tr中将在其前2个td中记录。

.ts文件

tableRowStart = '<tr>';
tableRowEnd = '</tr>';

在.html文件中：

 <table class="row mb-5" style="width: 100%;">
    <tbody style="width: 100%;">
      <ng-container *ngFor="let address of printAddresses; let i = index">
        <ng-container *ngIf="i%3===0">
          {{ tableRowStart }}
        </ng-container>
        <td style="width: 30%">
          <div style="padding-bottom: 2%">
            {{ address.firstName }} {{ address.lastName }}
          </div>
          <div style="padding-bottom: 2%">
            {{ address.careOfAddress }} - {{ address.street}}
          </div>
          <div style="padding-bottom: 2%">
            {{ address.city }}
          </div>
          <div style="padding-bottom: 2%">
            {{ address.postalcode }} {{ address.state }}
          </div>
        </td>
        <ng-container *ngIf="i%3===2 || i===printAddresses.length-1">
          {{ tableRowEnd }}
        </ng-container>
      </ng-container>
    </tbody>
  </table>

Answer 1

如果我正确理解了您的要求，就可以了，

<table>
    <tbody>
        <tr *ngFor="let address of printAddresses; let i = index">
            <td> {{ address.firstName }} {{ address.lastName }} </td>
            <td> {{ address.city }} </td>
            <td> {{ address.postalcode }} {{ address.state }} </td>
        </tr>
    </tbody>
</table>

根据您的要求添加其他样式。

根据您的确切要求，我建议使用网格而不是表格。您可以像这样使用引导行和列：

<div class="row">
    <div class="col-4" *ngFor="let address of printAddresses">
        <div>{{ address.firstName }} {{ address.lastName }}</div>
        <div>{{ address.city }}</div>
        <div>{{ address.postalcode }} {{ address.state }}</div>
    </div>
</div>

Answer 2

请不要尝试通过将任何HTML标签存储为字符串来附加它们。如果需要，请仅使用DOM操作。

Angular用双花括号（插值绑定）计算所有表达式，将表达式结果转换为字符串。

我们可以使用<tr>标记或您要动态生成的任何HTML标记上的*ngFor指令来迭代列表，从而动态创建<tr>。

这有帮助：

<tr *ngFor="let address of printAddresses; let i = index">
   <td> {{ address.firstName }} {{ address.lastName }} </td>
   <td> {{ address.city }} </td>
   <td> {{ address.postalcode }} {{ address.state }} </td>
<tr>

修改：

为此，一种方法是将printAddresses拆分为.ts文件中的多维数组，每个内部数组中都有3个地址。

printAddresses分裂后看起来像这样：[[addr1,addr2,addr3],[addr4,addr5,addr6]]。

在.html文件中：

<tr *ngFor="let addressSet of printAddresses; let i = index">

   <td *ngFor="let address of addressSet ; >

      <div style="padding-bottom: 2%">
        {{ address.firstName }} {{ address.lastName }}
      </div>
      <div style="padding-bottom: 2%">
        {{ address.careOfAddress }} - {{ address.street}}
      </div>
      <div style="padding-bottom: 2%">
        {{ address.city }}
      </div>
      <div style="padding-bottom: 2%">
        {{ address.postalcode }} {{ address.state }}
      </div>

  </td>

<tr>

如何在Angular中动态创建表的td？

2 个答案: