Динамический ряд в угловых

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>

Ожидаемый результат - нижеприведенный код.

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>

Проблема, с которой я сталкиваюсь, заключается в том, что мне нужно добавлять tr после каждого запуска * ngFor, и число 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]
 }
]