在角度组件计划同步中在#dateHeaderTemplate中获得专业知识

Question

我需要进入模板#dateHeaderTemplate，因为要获取一天的开始时间和结束时间并显示在标题中，所以要去的专业人员的ID是什么？

从此link中您可以看到我们可以使用可自定义的元素来更改#dateHeaderTemplate标头。

[如果有一种方法可以像我在#resourceHeaderTemplate中一样获得打击乐值，那么我可以得到专家ID。

component.ts：

  public getStartTimeAndEndTime(data): string {

    // values containing data
    // {date: Mon Oct 21 2019 00:00:00 GMT-0300 (Hora padrão de Brasília), type: "dateHeader"}

    // I need here a way to identify which professional is being covered

    return '13:30 - 18:30';
  }

  public getDateHeaderText(value: Date): string {
    return this.instance.formatDate(value, { skeleton: 'Ed' });
  }

component.html：

<ng-template #resourceHeaderTemplate let-data>

   <!-- here I have the professional id -->

    <div class='template-wrap'>
        <div class="avatar resource-image {{getDoctorImage(data)}}"></div>
        <div class="resource-details">
            <div class="resource-name">{{getDoctorName(data)}}</div>
            <div class="h6">{{ getEspecialidadeName(data) }}</div>
            <div class="h5 text-bold" [ngClass]="{'green-fg': getDoctorStatus(data).type === 'atendendo',
             'secondary-text': getDoctorStatus(data).type === 'away'  }">{{ getDoctorStatus(data).text }}</div>
        </div>
    </div>
</ng-template>

<ng-template #dateHeaderTemplate let-data>
    <div fxLayout="column" fxLayoutAlign="center center">
        <div class="date-text h3 text-bold">{{getDateHeaderText(data.date)}}</div>
        <div class="h6">{{getStartTimeAndEndTime(data)}}</div>
        <!-- 
            Here besides getting the date I also need the professional id
             that comes inside the ng-template #resourceHeaderTemplate-->
    </div>
</ng-template>
<e-resources>
    <e-resource field='DoctorId' title='Doctor' name='Doctors' [dataSource]='resourceDataSource'
        textField='text' idField='id' colorField='color' workDaysField='workDays' startHourField='startHour'
        endHourField='endHour'>
    </e-resource>
</e-resources>

Answer 1

同步混淆问候。

我们无法在dateHeaderTemplate中获取资源ID，我们建议您使用调度程序的renderCell事件在日期标头上显示资源的开始和结束时间。请参考以下示例。

https://stackblitz.com/edit/angular-mf9hdq-au5ue2?file=app.component.ts

onRenderCell(args: RenderCellEventArgs): void {

  // Here we can retrieve resource data while rendering date header cells
  if (args.elementType == 'dateHeader') {
    let resData: any = this.scheduleObj.getResourcesByIndex(parseInt(args.element.getAttribute('data-group-index'), 10));
    let ele: HTMLElement = createElement('div', {
      innerHTML: ""+resData.resourceData.startHour +" - "+resData.resourceData.endHour,
      className: 'res-name', styles: 'padding-top: 5px'
    });
    (args.element).appendChild(ele);
  }
}