Блог

Я использую расписание синхронизации 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/

Пожалуйста, включите компонент button ejs-button в ng-template для решения этой проблемы, как показано ниже

     <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