我有一个如下所示的数据模型，我正在尝试使用它填充我的模板以获得以下所需结果 -
使用的数据对象 -
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> {{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组件的primeng . 在模板中我使用了 <p-tabpanel> 这是primeng UI组件 . 问题是我编写的代码在填充到三个面板时工作正常但在每个面板内部使用col-md div的* ngFor也会重复三次 . 我不希望这种情况发生 .
谁能让我知道我在这里失踪了什么？我不使用* ng对于它应该使用的方式还是我需要更改我的dataObject？
目前的结果 -
1 回答
所以这里只是一些想法，不确定是否真的是问题，但可能会让你进一步排除故障 .
1）我不确定
mat-tab控件是什么，因为我不相信它是primeNG库的一部分 . 但是它的ngFor循环遍历一个名为aptSchedule的对象，你的col-md divngFor也循环遍历一个名为aptSchedule的对象 . 第一个碰巧在阵列中有两个对象（ABC医院和微笑医院），你的约会似乎重复了两次 . 这些对象名称是否有可能互相踩踏？如果你添加第三家医院，约会重复3次？2）虽然我不认为这实际上是问题，但似乎你正在为每个ngFor多次跟踪变量
i但没有将它用于任何事情，所以你可以删除它只是为了更清洁的代码 .