Angular 5 Datatables выдает предупреждение при повторном рендеринге - PullRequest
Новая
       20

Angular 5 Datatables выдает предупреждение при повторном рендеринге

0 голосов
/ 24 мая 2018

Мне удалось создать таблицу и внедрить datatable в мой угловой проект 5

html-код для таблицы: 

<table class="table table-hover mt-3" datatable  [dtOptions]="dtOptionsContent" [dtTrigger]="dtTriggerContent">
    <thead>
        <tr>
            <th scope="col">Content Type</th>
            <th scope="col">User Occupation</th>
            <th scope="col">Content Name</th>
            <th scope="col">Carrot</th>
        </tr>
    </thead>
    <tbody>           
        <tr *ngFor="let reward of rewards" >
            <td  data-toggle="modal" data-target="#seeDetail" (click)="onSelect(reward)">{{getRewardType(reward.type)}}</td>
            <td  data-toggle="modal" data-target="#seeDetail" (click)="onSelect(reward)">{{getRoleType(reward.role)}}</td>
            <td  data-toggle="modal" data-target="#seeDetail" (click)="onSelect(reward)">{{reward.name}}</td>
            <td  data-toggle="modal" data-target="#seeDetail" (click)="onSelect(reward)">{{reward.carrot}}</td>
        </tr>
    </tbody>
</table>

.ts код для настроек данных: 

dtOptionsContent: DataTables.Settings = {};
dtTriggerContent: Subject<any> = new Subject();

@ViewChild(DataTableDirective)
dtElementContent: DataTableDirective;

.ts для получения вознаграждений: 

getRewards(): void 
{
    this.adminService.getRewards().subscribe(rewards=> {
        this.rewards = rewards;
        this.dtTriggerContent.next();
    });
}

Сортировка, разбиение на страницы и поиск работают, и когда я добавляю / удаляю содержимое в таблицу, таблица обновляется.

Однако после обновления, когда я попробовал сортировку и разбиение на страницы, содержимое таблицы возвращается к предварительно добавленному / удаленному списку.

Я попытался уничтожить и повторно отобразить таблицу.Это код .ts для добавления контента: 

addSocial(role: number, rewardName: string, carrot: number): void 
{
    this.dtElementContent.dtInstance.then((dtInstance: DataTables.Api) => {
        let currentCarrot = 0;
        if(!isNaN(carrot))
        {
            //Setting for rewardTemp goes here

            this.adminService.addReward(this.rewardTemp)
            .subscribe(reward => {
                dtInstance.destroy();
                this.rewards.push(reward);
                this.dtTriggerContent.next();
            });

            //Success Notification goes here
        }
        else
            //Error Notification goes here
    });
}

, в то время как при успешной сортировке обновленного контента после обновления списка появляется предупреждающее предупреждение после повторного рендеринга.

Предупреждение содержит «Предупреждение DataTables: таблица id = DataTables_Table_1 - Невозможно повторно инициализировать DataTable. Для получения дополнительной информации об этой ошибке см. http://datatables.net/tn/3"

Что не так ??

...