角度动态行跨度 [英] Dynamic rowspan in angular
本文介绍了角度动态行跨度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
人数及其手机号码是动态的.我需要在表格中显示这一点.
Number of persons and their mobiles numbers are dynamic. I need to show this in table.
数据可以包含任意数量的 pname 和手机号码.
Data can contain any number of pname and mobile numbers.
dataList = [
{
pname: "abc",
numbers: [{mobile1: 123, mobile2: 234}]
},
{
pname: "mno",
numbers: [{mobile1: 125, mobile2: 237}]
}
]
模板
<tr *ngFor="let data of dataList">
<td [attr.rowspan]="data.numbers.lenght">data.pname</td>
<td>data.numbers</td> // Here how do I show all mobile numbers of the person.
</tr>
预期输出如下代码.
table, th, td {
border: 1px solid black;
}
<table>
<tr>
<th>Pname</th>
<th>Numbers</th>
</tr>
<tr>
<td rowspan="2">Abc</td>
<td>123</td>
</tr>
<tr>
<td>234</td>
</tr>
<tr>
<td rowspan="2">Mno</td>
<td>125</td>
</tr>
<tr>
<td>237</td>
</tr>
</table>
我面临的问题是我需要在每次运行 *ngFor 后添加 tr 并且 tr 的数量将取决于数字数组的长度以形成行跨度.
Problem I am facing is I need to add tr after each run of *ngFor and the number of tr will depend on length of numbers array to make row span.
推荐答案
你可以像下图这样操作
<table>
<ng-container *ngFor="let data of dataList">
<tr>
<td [attr.rowspan]="data.numbers.length">{{data.pname}}</td>
<td>{{data.numbers[0]}}</td>
</tr>
<ng-container *ngFor="let number of data.numbers; let i= index;">
<tr *ngIf="i!=0">
<td>{{number}}</td>
</tr>
</ng-container>
</ng-container>
</table>
但是
datalist 必须是以下格式,即数字必须是数组
But
datalist must be of the following format i.e. numbers must be an array
dataList = [
{
pname: "abc",
numbers: [123, 234]
},
{
pname: "mno",
numbers: [125, 237]
}
]
这篇关于角度动态行跨度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文