使用 ngFor 角度的嵌套数组渲染答案

【问题标题】：nested array rendering using ngFor angular使用 ngFor 角度的嵌套数组渲染
【发布时间】：2018-08-12 04:43:20
【问题描述】：

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

注意这类似于嵌套数组，但唯一的区别是 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>

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

Working sample code stackblitz

请帮帮我

预期输出

【问题讨论】：

我们能看到createBooking是如何定义的吗？ createBooking.bookings 是 bookings 的单个实例吗？至于serialType，我假设它是bookings的字符串成员。
已更新，@ConnorsFan。

标签： html angular typescript html-table ngfor

【解决方案1】：

从您上面的代码中，我看不到第二个标签与第一个标签有任何关系，而作为您的数据结构，我认为需要嵌套标签。我认为您应该为外循环使用标签，为内循环使用标签。

【讨论】：

您能否提供一个示例代码如何获得所需的输出