动态行跨角度

Question

人数及其手机号码是动态的。我需要在表中显示此内容。

数据可以包含任意数量的pname和手机号码。

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>

预期输出为以下代码。

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>

我面临的问题是，我需要在每次* ngFor运行之后添加tr，tr的数量将取决于数字数组的长度来进行行跨度。

Answer 1

您可以如下所示进行操作

<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>

But 数据列表必须采用以下格式，即数字必须为数组

dataList = [
 {
  pname: "abc",
  numbers: [123, 234]
 },
{
  pname: "mno",
  numbers: [125,  237]
 }
]

Answer 2

简单的。

您不需要索引和嵌套的 ng-container。

<table>
    <ng-container *ngFor="let data of dataList">
        <tr>
            <td [attr.rowspan]="data.numbers.length + 1">{{data.pname}}</td>
        </tr>
        <tr *ngFor="let number of data.numbers;">
          <td>{{number}}</td>
        </tr>
    </ng-container>
</table>

工作示例。 https://stackblitz.com/edit/angular-yrose8?file=src%2Fapp%2Fapp.component.html