Nested *ngFor in Angular 2

Question

I have a data model like below and I am trying to use it to populate my template for the following desired result -

Data object used-

aptSchedule = [
    {
      "DoctorID": "DVER12",
      "clinic": "ABC Hospital",
      "schedule": [
        {
          "day": "01-01-2018",
          "aptSchedule": [
            {
              "session": "morning",
              "appointment": [
                {
                  "time": "10:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "10:15",
                  "IsAvl": "Y"
                }
              ]
            },
            {
              "session": "afternoon",
              "appointment": [
                {
                  "time": "12:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "12:15",
                  "IsAvl": "Y"
                }
              ]
            },
            {
              "session": "evening",
              "appointment": [
                {
                  "time": "17:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "17:15",
                  "IsAvl": "Y"
                }
              ]
            }
          ]
        },
        {
          "day": "02-01-2018",
          "aptSchedule": [
            {
              "session": "morning",
              "appointment": [
                {
                  "time": "10:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "10:15",
                  "IsAvl": "Y"
                }
              ]
            },
            {
              "session": "afternoon",
              "appointment": [
                {
                  "time": "12:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "12:15",
                  "IsAvl": "Y"
                }
              ]
            },
            {
              "session": "evening",
              "appointment": [
                {
                  "time": "17:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "17:15",
                  "IsAvl": "Y"
                }
              ]
            }
          ]
        },
        {
          "day": "03-01-2018",
          "aptSchedule": [
            {
              "session": "morning",
              "appointment": [
                {
                  "time": "10:00",
                  "IsAvl": "Y"
                }
              ]
            },
            {
              "session": "afternoon",
              "appointment": [
                {
                  "time": "12:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "12:15",
                  "IsAvl": "Y"
                }
              ]
            },
            {
              "session": "evening",
              "appointment": [
                {
                  "time": "17:00",
                  "IsAvl": "Y"
                }
              ]
            }
          ]
        }

      ]
    },
    {
      "DoctorID": "DVER12",
      "clinic": "Smile Hospital",
      "schedule": [
        {
          "day": "01-01-2018",
          "aptSchedule": [
            {
              "session": "morning",
              "appointment": [
                {
                  "time": "10:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "10:15",
                  "IsAvl": "Y"
                }
              ]
            },
            {
              "session": "afternoon",
              "appointment": [
                {
                  "time": "12:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "12:15",
                  "IsAvl": "Y"
                },
                {
                  "time": "12:30",
                  "IsAvl": "Y"
                }
              ]
            },
            {
              "session": "evening",
              "appointment": [
                {
                  "time": "17:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "17:15",
                  "IsAvl": "Y"
                },
                {
                  "time": "18:00",
                  "IsAvl": "Y"
                }
              ]
            }
          ]
        },
        {
          "day": "02-01-2018",
          "aptSchedule": [
            {
              "session": "morning",
              "appointment": [
                {
                  "time": "10:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "10:15",
                  "IsAvl": "Y"
                },
                {
                  "time": "10:30",
                  "IsAvl": "Y"
                }
              ]
            },
            {
              "session": "afternoon",
              "appointment": [
                {
                  "time": "12:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "12:15",
                  "IsAvl": "Y"
                },
                {
                  "time": "12:30",
                  "IsAvl": "Y"
                }
              ]
            },
            {
              "session": "evening",
              "appointment": [
                {
                  "time": "17:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "17:15",
                  "IsAvl": "Y"
                }       ]
            }
          ]
        },
        {
          "day": "03-01-2018",
          "aptSchedule": [
            {
              "session": "morning",
              "appointment": [
                {
                  "time": "10:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "10:15",
                  "IsAvl": "Y"
                }
              ]
            },
            {
              "session": "afternoon",
              "appointment": [
                {
                  "time": "12:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "12:15",
                  "IsAvl": "Y"
                }
              ]
            },
            {
              "session": "evening",
              "appointment": [
                {
                  "time": "17:30",
                  "IsAvl": "Y"
                },
                {
                  "time": "17:45",
                  "IsAvl": "Y"
                },
                {
                  "time": "18:00",
                  "IsAvl": "Y"
                },
                {
                  "time": "18:15",
                  "IsAvl": "Y"
                },
                {
                  "time": "18:30",
                  "IsAvl": "Y"
                },
                {
                  "time": "18:45",
                  "IsAvl": "Y"
                },
                {
                  "time": "19:30",
                  "IsAvl": "Y"
                },
                {
                  "time": "19:45",
                  "IsAvl": "Y"
                }
              ]
            }
          ]
        }

      ]
    }
  ];

The html template used is as below -

<div class="col-md-12" style="padding:0">
    <mat-tab-group style="padding-top:10px; padding-left:0">
      <mat-tab label="clinicItem.clinic" *ngFor="let clinicItem of aptSchedule; let i= index">
        <ng-template mat-tab-label>
          <mat-icon>business</mat-icon>&nbsp;{{clinicItem.clinic}}
        </ng-template>
        <div class="formatInput">
          <div class="row">
            <p-tabView orientation="left">
              <p-tabPanel header="{{dateTab.day}}" [selected]="true" *ngFor="let dateTab of clinicItem.schedule; let i= index">
                <div class="col-md-12">
                  <div class="row">
                    <div class="col-md-4" *ngFor="let session of dateTab.aptSchedule; let i= index">
                      <div class="col-md-12 col-md-offset-3">
                        <p>{{session.session}}</p>
                      </div>
                      <div>
                        <mat-radio-group class="example-radio-group">
                          <mat-radio-button [disabled]="apt.IsAvl=='N'" style="padding:7px" class="example-radio-button" *ngFor="let apt of session.appointment"
                            [value]="apt.time">
                            {{apt.time}}
                          </mat-radio-button>
                        </mat-radio-group>
                      </div>
                    </div>
                  </div>
                </div>
              </p-tabPanel>
            </p-tabView>
          </div>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>

I am using the Angular Material library and also primeng for several UI components. In the template I have used <p-tabpanel> which is primeng UI component. The problem is that the code I have written works fine in populating till the three panels but inside each panel the *ngFor used over the col-md div is getting repeated thrice too. I don`t want that to happen.

Can someone let me know what am I missing here? Am I not using *ngFor the way it should be used or if I need to change my dataObject?

Current result-

Answer 1

So just a couple ideas here, not sure if either is really the issue though but maybe get you further down troubleshooting.

1) I am not sure what the mat-tab control is as I don't believe that is part of the primeNG library. But its ngFor is looping through an object called aptSchedule and your col-md div ngFor is also looping through an object named aptSchedule . The first one happens to have two objects in the array (ABC Hospital and Smile Hospital) and your appointments seems to be repeating twice. Is there a chance these object names are stepping on each other? If you add a third hospital do the appointments repeat 3 times?

2) While I don't think this is actually the issue it seems you are tracking the varaible i multiple times for each ngFor but not using it for anything so you can probably removing that just for cleaner code.