ng-fullcalendar - Angular 6 - внешние события в цикле ngFor - PullRequest
0 голосов
/ 04 декабря 2018

Я пытаюсь использовать функцию «перетаскивания» с внешними событиями.

Это работает, за исключением случаев, когда я использую * 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 ***********************

Вот мой новый метод getTickets, следуя советам в комментарии:

 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);
        });
}

У меня нет сообщения об ошибкено это не работает

1 Ответ

0 голосов
/ 04 декабря 2018

Вот код угловой версии.

<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);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...