ngFor创建2行 [英] ngFor create 2 rows
本文介绍了ngFor创建2行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用 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屋!
查看全文