ng-fullcalendar-Angular 6-ngFor循环中的外部事件 [英] ng-fullcalendar - Angular 6 - external events in ngFor loop

问题描述

我尝试对外部事件使用拖放"功能.

I try to use "drag and drop" function with external events.

它可以工作，除非我使用* ngFor:

It works except if I use *ngFor :

我的HTML文件:

<p>Interventions en attente</p>
<ul id='external-events'>
     <li *ngFor="let ticket of ticketList">
        <div class='fc-event'>{{ ticket.message }}</div>  // Doesn't Work !!
     </li>
     <li>
         <div class='fc-event'>My Event 1</div>  // Works !!
     </li>
</ul>

这是我的TS文件:

ngAfterViewInit() {
    $('#external-events .fc-event').each(function () {
        // store data so the calendar knows to render an event upon drop
        $(this).data('event', {
            title: $.trim($(this).text()), // use the element's text as the event title
            stick: true // maintain when user navigates (see docs on the renderEvent method)
        });
        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });
}

我该如何解决?

****************更新2 ***********************

**************** UPDATE 2 ***********************

以下是我在注释中的建议，这是我的新getTickets方法:

Here is my new getTickets method by following advices in comment :

 getNewTickets() {
    this.loading = false;
    this.myJarviaServices.getNewTickets()
        .subscribe(resp => {
                console.log('angular');
            this.ticketList = resp.content;
            console.log(this.ticketList);
                this.customevents.forEach(function (item) {
                    // store data so the calendar knows to render an event upon drop
                    $(item.nativeElement).data('event', {
                        title: $.trim($(item.nativeElement).text()), // use the element's text as the event title
                        stick: true // maintain when user navigates (see docs on the renderEvent method)
                    });
                    // make the event draggable using jQuery UI
                    $(item.nativeElement).draggable({
                        zIndex: 999,
                        revert: true,      // will cause the event to go back to its
                        revertDuration: 0  //  original position after the drag
                    });

                });
        },
        error => {
            console.log('authService.login error' + error);
            console.log('error status : ' + error.status);
            // this.alertService.error(error);
            this.myJarviaServices.error(error);
        });
}

我没有错误消息，但是它不起作用

I have no error message but it doesn't work

推荐答案

以下是角度版本代码.

<p>Interventions en attente</p>
<ul id='external-events'>
     <li #customevents *ngFor="let ticket of ticketList">
        <div class='fc-event'>{{ ticket.message }}</div>  // Doesn't Work !!
     </li>
</ul>

组件:

@ViewChildren('customevents') customevents: QueryList<any>;
ngAfterViewInit() {
   setTimeout(()=>{
   this.customevents.forEach(function (item) {
        // store data so the calendar knows to render an event upon drop
        $(item.nativeElement).data('event', {
            title: $.trim($(item.nativeElement).text()), // use the element's text as the event title
            stick: true // maintain when user navigates (see docs on the renderEvent method)
        });
        // make the event draggable using jQuery UI
        $(item.nativeElement).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });
 }, 100);
}

这篇关于ng-fullcalendar-Angular 6-ngFor循环中的外部事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！