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

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

2 голосов
/ 13 марта 2019

Я использую таблицы угловых данных. Я пытаюсь изменить данные в них. У меня есть 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 / pagination / search, но данные отображаются правильно. 

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

1 Ответ

0 голосов
/ 27 июня 2019

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

html 

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

.ts file 

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 },
  () => {     
});
...