html – ngFor创建2行

前端之家收集整理的这篇文章主要介绍了html – ngFor创建2行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用 Angular 2 ngFor我正在创建一个表.

我的问题是我的数据数组包含的元素使得每个元素应该在表中创建2个连续的行(使用不同的字段,第二行可以与更多数据折叠)

  1. <tbody>
  2. <tr *ngFor="let element of data; let i = index">
  3. <th>...<th>
  4. ...
  5. <td>...<td>
  6. </tr>
  7. </tbody>

问题是tbody不允许< tr>旁边的任何属性.

我正在寻找类似的东西

  1. <tbody>
  2. <template *ngFor="let element of data; let i = index">
  3. <tr>...</tr> //row 1
  4. <tr>...</tr> //row 2
  5. </template>
  6. </tbody>

解决方法

存在略有不同的语法:
  1. <template ngFor let-element [ngForOf]="data" let-i="index">
  2. <tr>...</tr> //row 1
  3. <tr>...</tr> //row 2
  4. </template>

要么

  1. <ng-container *ngFor="let element of data let i=index">
  2. <tr>...</tr> //row 1
  3. <tr>...</tr> //row 2
  4. </ng-container>

更新> = 4.0.0<模板>更改为< ng-template>

  1. <ng-template ngFor let-element [ngForOf]="data" let-i="index">
  2. <tr>...</tr> //row 1
  3. <tr>...</tr> //row 2
  4. </ng-template>

猜你在找的HTML相关文章