问题描述
我正在使用Syncfusion Angular时间表。 添加标头快速信息模板。
<ng-template #quickInfoTemplatesHeader let-data>
<div *ngIf="data.elementType == 'event'">
<div class="e-popup-header" style="background-color: rgb(234,122,87);">
<div class="e-header-icon-wrapper">
<button (click)="onEditClick($event)" class="e-edit e-icons e-control e-btn e-lib e-flat e-round e-small e-icon-btn" title="Edit">
<span class="e-btn-icon e-icons e-edit-icon"></span>
</button>
<button (click)="onDeleteClick($event)" class="e-delete e-icons e-control e-btn e-lib e-flat e-round e-small e-icon-btn" title="Delete">
<span class="e-btn-icon e-icons e-delete-icon"></span>
</button>
<button (click)="onCloseClick($event)" class="e-close e-control e-btn e-lib e-flat e-round e-small e-icon-btn" title="Close">
<span class="e-btn-icon e-icons e-close-icon"></span>
</button>
</div>
<div class="e-subject-wrap">
<div class="e-subject e-text-ellipsis" [title]="data.Subject"><div [innerHTML]="data.Subject"></div></div>
</div>
</div>
</div>
</ng-template>
当我单击“编辑”按钮或双击选项卡时,将清除js错误: 无法读取未定义的属性“ 0”
这是我点击ts的事件:
public onEditClick(args: any): void {
if (this.selectionTarget) {
let eventData: { [key: string]: Object } = this.scheduleObj.getEventDetails(this.selectionTarget) as { [key: string]: Object };
let currentAction: CurrentAction = 'Save';
// console.log("TEST",eventData);
this.scheduleObj.openEditor(eventData,currentAction);
}
}
我遵循官方指南:
https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/
解决方法
请在ng-template中包含按钮组件 ejs-button ,以解决此问题,如下所示
<ng-template #quickInfoTemplatesHeader let-data>
<div *ngIf="data.elementType == 'event'">
<div class="e-popup-header" style="background-color: rgb(234,122,87);">
<div class="e-header-icon-wrapper">
<button (click)="onEditClick($event)" ejs-button class="e-edit e-icons e-control e-btn e-lib e-flat e-round e-small e-icon-btn" title="Edit">
<span class="e-btn-icon e-icons e-edit-icon"></span>
</button>
<button (click)="onDeleteClick($event)" ejs-button class="e-delete e-icons e-control e-btn e-lib e-flat e-round e-small e-icon-btn" title="Delete">
<span class="e-btn-icon e-icons e-delete-icon"></span>
</button>
<button (click)="onCloseClick($event)" ejs-button class="e-close e-control e-btn e-lib e-flat e-round e-small e-icon-btn" title="Close">
<span class="e-btn-icon e-icons e-close-icon"></span>
</button>
</div>
<div class="e-subject-wrap">
<div class="e-subject e-text-ellipsis" [title]="data.Subject">
<div [innerHTML]="data.Subject"></div>
</div>
</div>
</div>
</div>
</ng-template>
有关更多参考,请参考以下示例。
https://stackblitz.com/edit/angular-eetjnm?file=app.component.html