使用ngFor angular进行嵌套数组渲染

Question

我有一个表，其中使用*ngFor集合重复tr，该集合具有子成员，应该作为相关表绑定。

注意这类似于嵌套数组，但只是区别于html不在嵌套数组中。我已经引用了ngFor deep nested array

打字稿类

export class CreateBooking{
 id: number;
 bookings: BookingItem[]; // This should repeat as parent rows,
} 

export class BookingItem {
 id: number;
 bookingNumber: number;
 relatedVehicles: BookingItem[]; //This should be repeated as child rows
}

HTML

<table>

<tr *ngFor="let booking of createBooking.bookings;let bookingIndex = index;">
  <td>
  <input type="text" 
         [ngModel]="booking.serialType" name="serialType--{{bookingIndex}}" />
  </td>
</tr>

<tr> *ngFor="let v of booking[parent].relatedVehicles;
      let i = index;
      let parent = booking[something];"

 <td>
  <input [(ngModel)]="v.bookingNumber"
        (ngModelChange)="serialNumberChangedIndex(parentIndex,$event,i)" 
        name="bookingNumber--{{i}}"/>
 </td>

</tr>

</table>

• 问题1 - 如何获得子行的父行索引
• 问题2 - 作为替代方案，我尝试了一个内部，其中包含另一个有子项的表，但即使使用td colspan="allcolumns"我也无法达到预期的输出。

挑战 - 如果我设计这样的话

<tr *ngFor="let booking of createBooking.bookings;let bookingIndex = index;">
  <td>
  <input type="text" 
         [ngModel]="booking.serialType" name="serialType--{{bookingIndex}}" />
  </td> 

  <td>
     <table>
     <tbody>
     <tr> *ngFor="let v of booking.RelatedVehicles;let i = index;"
      <td>
     <input [(ngModel)]="v.bookingNumber"
        (ngModelChange)="serialNumberChangedIndex(bookingIndex ,$event,i)" 
        name="bookingNumber--{{i}}"/>
      </td>
     </tr>
    </tbody>
   </table>
  </td>

 </tr>

这样我可以生成嵌套数组，但子集合将从第2列开始，我需要将子元素作为完整行。

Working sample code stackblitz

请帮我一些

预期产出

Answer 1

从上面的代码中，我没有看到第二个标记与第一个标记之间存在任何关系，作为数据结构，我看到需要嵌套标记。我认为你应该使用外部循环的标签和内部循环的标签。