Question

我有一个如下所示的数据模型，我正在尝试使用它填充我的模板以获得以下所需结果 -

使用的数据对象 -

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"
                }
              ]
            }
          ]
        }

      ]
    }
  ];

使用的html模板如下 -

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

我正在使用Angular Material库，并且还使用了几个UI组件。在模板中，我使用了<p-tabpanel>作为primeng UI组件。问题是我编写的代码在填充到三个面板时工作正常但在每个面板内部使用col-md div的* ngFor也会重复三次。我不希望这种情况发生。

有人能让我知道我在这里错过了什么吗？我没有使用* ng对于它应该使用的方式还是我需要更改我的dataObject？

当前结果 -

Answer 1

所以这里只是一些想法，不确定是否真的是问题，但可能让你进一步排除故障。

1）我不确定mat-tab控制是什么，因为我不相信它是primeNG库的一部分。但是它的ngFor循环遍历一个名为aptSchedule的对象，而你的col-md div ngFor也循环遍历一个名为aptSchedule的对象。第一个碰巧在阵列中有两个对象（ABC医院和微笑医院），你的约会似乎重复了两次。这些对象名称是否有可能互相踩踏？如果你添加第三家医院，约会重复3次？

2）虽然我不认为这实际上是问题，但似乎你正在为每个ngFor多次跟踪变量i但是没有将它用于任何事情，所以你可能只是为了更清洁码。

Angular 2中的嵌套* ngFor

1 个答案: