ngFor创建2行 [英] ngFor create 2 rows

问题描述

使用 Angular 2 ngFor 我正在创建一个表格。

我的问题是，我的数据数组包含元素这样每个元素应该在表中创建2个连续的行（使用不同的字段，第二行可以折叠更多的数据）

 < TBODY> 
< tr * ngFor =让数据的元素;让我=索引> 
 th th ... th th 
 ... 
< td> ...< td> 
< / tr> 
< / tbody> 
  

问题在于 tbody 不允许除< tr> 之外的任何属性。

我正在寻找类似于

 < TBODY> 
< template * ngFor =let data of data; let i = index> 
< tr> ...< / tr> // row 1 
< tr> ...< / tr> // row 2 
< / template> 
< / tbody> 
  

解决方案

存在稍微不同的语法：

 < template ngFor let-element [ngForOf] =datalet-i =index> 
< tr> ...< / tr> // row 1 
< tr> ...< / tr> // row 2 
< / template> 
  

或

 < ng-container * ngFor =let let data of data let i = index> 
< tr> ...< / tr> // row 1 
< tr> ...< / tr> //第2行
< / ng-container> 
  

update for> = 4.0.0 < template> 改为< ng-template>

 < ; ng-template ngFor let-element [ngForOf] =datalet-i =index> 
< tr> ...< / tr> // row 1 
< tr> ...< / tr> //第2行
< / ng-template> 
  

Using Angular 2 ngFor I'm creating a table.

My problem is that my data array contains elements such that each element should create 2 consecutive rows in the table (Using different fields, The second row is collapsible with more data)

<tbody>
    <tr *ngFor="let element of data; let i = index">
       <th>...<th>
       ...
       <td>...<td>
    </tr>
</tbody>

Problem is that tbody doesn't allow any attribute beside <tr>.

I'm looking for something like

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

解决方案

That exists with slightly different syntax:

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

or

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

update for >= 4.0.0 <template> was changed to <ng-template>

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

这篇关于ngFor创建2行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！