javascript — Angular DataTable не сортирует асинхронные данные

Angular DataTable не сортирует асинхронные данные

На данных, которые я использую, у меня смешанные результаты при попытке их сортировки с помощью переключателей в заголовках таблицы. Похоже, что столбцы, которые заполняются ответом в моем первоначальном вызове GET, заполняются и сортируются, как ожидалось. Однако столбцы с данными, поступающими из вызовов GET во внешней подписке, сортируются не так, как ожидалось. В идеале все столбцы будут иметь возможность сортировать правильно.

При обёртывании this.dtTrigger.next() в setTimeout() равный 5000 мс, все столбцы сортируются должным образом. Итак, вопрос здесь в том, как бы я дождался, пока завершится внутренний вызов GET, чтобы вызвать dtTrigger.next() чтобы все столбцы можно было сортировать после завершения загрузки всех данных.

 import { Component, OnInit, Input, OnChanges } from '@angular/core'; import { Subject } from 'rxjs'; import { BuildersService } from '@/services/builders/builders.service'; import { CommunitiesService } from '@/services/communities/communities.service'; import { ContactsService } from '@/services/contacts/contacts.service'; import { DataTableDirective } from 'angular-datatables'; @Component({ selector: 'datatable-builders', templateUrl: './builder-datatable.component.html', styleUrls: ['./builder-datatable.component.scss'] }) export class BuilderDatatableComponent implements OnInit { @Input() title: string = ''; @Input() showFooter: boolean = true; @Input() rowsPerPage: number = 10; @Input() viewRoute: string = ''; @Input() viewText: string = 'View'; rows = []; dtOptions: DataTables.Settings = {}; dtTrigger: Subject{amp}lt;any{amp}gt; = new Subject(); constructor( private buildersService: BuildersService, private communitiesService: CommunitiesService, private contactsService: ContactsService ) { } dataTablesInit() { this.dtOptions = { pagingType: 'simple_numbers', lengthChange: false, info: this.showFooter, paging: this.showFooter, columnDefs: [ { targets: [4], orderable: false, searchable: false } ], initComplete: () ={amp}gt; { let searchLabels = document.querySelectorAll('.dataTables_filter {amp}gt; label'); searchLabels.forEach((label) ={amp}gt; { label.setAttribute('aria-label', 'Search/Filter Table'); }); } }; } ngOnInit() { this.dataTablesInit(); // Get the table data this.buildersService.getBuilders().subscribe((result: any) ={amp}gt; { // Get all Rows let rows = result.body.map(row ={amp}gt; { let communities = [], communitiesColumn = [], managersColumn = []; // Get the builders info and set up output row.CommunityIDs.forEach((id) ={amp}gt; { this.communitiesService.getCommunity(id).subscribe((result: any) ={amp}gt; { communities.push(result.body); communitiesColumn.push( result.body.Name ); }); }); row.Contacts.Managers.forEach((id) ={amp}gt; { this.contactsService.getContact(id).subscribe((result: any) ={amp}gt; { managersColumn.push(result.body); }); }); console.log(row); // Set additional row data row.Communities = communities; row.CommunitiesColumn = communitiesColumn; row.ManagersColumn = managersColumn; return row; }); this.rows = result.body; this.dtTrigger.next(); console.log(this.rows) }); } } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector