Невозможно динамически отображать данные в таблице данных. (Угловой 6)

Я использую угловые таблицы данных. Я пытаюсь изменить в них данные. У меня есть 6 методов, выполняющих разные вычисления и помещающих данные в массив.

У меня 6 кнопок. При нажатии кнопки вызывается соответствующий метод и выполняется расчет. Я помещаю данные в массив (storiesOfIndicators)

Заявление о проблеме

При первом нажатии на кнопку таблица отображается правильно, но когда я нажимаю кнопку «Далее», данные не отображаются должным образом, а статус разбивки на страницы показывает результат первого метода. Таблица данных не отображается должным образом. В основном разбивка на страницы не работает

Способ 1->

storiesWhomDefectTimeIsGreaterThanDev() {
    this.storiesOfIndicators = [];
    for (let i = 0; i < this.global.data.length; i++) {
        if (this.global.data[i].defectTime > this.global.data[i].devTime) {
            this.storiesOfIndicators.push(this.global.data[i])
        }
    }
}

Моя таблица

<table id="indicators" *ngIf="storiesOfIndicators.length > 0" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
    <thead>
        <tr>
            <th>Story Id</th>
            <th>Story Name</th>
            <th>Time Spent (Days)</th>
            <th>Estimated Time (Days)</th>
            <th>Threshold Value</th>
            <th>Aggregated Estimated Time (Days)</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let story of storiesOfIndicators">
            <td>{{story.id}}</td>
            <td>{{story.name}}</td>
            <td>{{convertValueToDays(story.timeSpent)}}</td>
            <td>{{convertValueToDays(story.originalEstimates)}}</td>
            <td>{{story.threshold}}</td>
            <td>{{convertThresholdValue(story.originalEstimates)}}</td>
            <td>{{story.status}}</td>
        </tr>
    </tbody>
</table>

Пробное решение Я попытался добавить this.dtrigger.next() в начале каждого метода, но он не работал.

Я снова попытался вызвать этот метод в начале моего метода, но не работал, вместо этого он удалил мой css / разбиение на страницы / поиск, но данные отображаются правильно.

ngAfterViewInit(): void {
    this.dtTrigger.next();
}
rerender() {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        dtInstance.destroy();
        this.dtTrigger.next();
    });
}

angular datatable angular6 angular-datatables
person Mishi    schedule 13.03.2019    source источник
comment
Немного сложно понять вашу проблему нумерации страниц без примера. Можете ли вы предоставить нам пример stackblitz или plunker? Спасибо.   -  person Wandrille    schedule 13.03.2019
comment
см. this для документации по разбивке на страницы   -  person Tushar Walzade    schedule 13.03.2019
comment
@Tushar Walzade Я хочу повторно инициализировать таблицу. Данные и разбивка на страницы не работают должным образом.   -  person Mishi    schedule 13.03.2019

Ответы (1)


arrow_upward
0
arrow_downward

Это потому, что сначала выполняется рендеринг таблицы, а затем данные загружаются после вызова API. Я использовал ngIf, чтобы скрыть таблицу до тех пор, пока данные не будут извлечены, тогда она загрузится правильно. Это просто эксперимент.

html

<table datatable  class="table" *ngIf="flg"  >

файл .ts

flg: boolean = false;

this._UsersService.GetUser(Mobile, Department, Section, Branch, designation_Id, group).subscribe((data: ResponseData) => {
  if (data.data.length > 0) {
      this.flg = true;

      this.UserList = data.data;
   }

      console.log(this.UserList);
},
error => { this.errorMessage = <any>error },
  () => {     
});
person user11707801    schedule 27.06.2019