-1

I have a table where tr is repeated using *ngFor a collection, the collection which have a child members which should be binded as related table.

Note This is similar to nested array but only difference the html is not inside the nested array. I have referenced ngFor deep nested array already

typescript class

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>
  • Question 1 - How would i get the index of parent row on the child row
  • Question 2 - As a alternative i tried a inside which contains another table which have child items, But even with td colspan="allcolumns" i couldn't achieve expected output.

Challenges - if i design the like this

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

This way i could generate the Nested array but the child collection will start at the 2nd column, I need the child element as full row.

Working sample code stackblitz

Please help me with some

expected output

Desired output file

Eldho
  • 7,795
  • 5
  • 40
  • 77
  • Can we see how `createBooking` is defined? Is `createBooking.bookings` a single instance of `bookings`? As for `serialType`, I assume that it is a string member of `bookings`. – ConnorsFan Mar 04 '18 at 13:46
  • Updated, @ConnorsFan. – Eldho Mar 04 '18 at 13:51

1 Answers1

0

From your code above, I do not see any relation in the second tag to the first one, where as your data structure I see the need for a nested tag. I think you should use a tag for the outer loop and a tag for the inner loop.

Sudarshana Gurusinghe
  • 48
  • 2