Angular DataTable 未对异步数据进行排序

Question

在我正在使用的数据表上，尝试使用表标题中的切换对它们进行排序时，我得到了混合结果。似乎在我的初始 GET 调用中由响应填充的列按预期填充和排序。但是，来自外部订阅内部的 GET 调用的数据列未按预期排序。理想情况下，所有列都能够正确排序。

当将 this.dtTrigger.next() 包装在 5000 毫秒的 setTimeout() 中时，所有列都按预期排序。所以这里的问题是，我如何等到最里面的 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<any> = 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: () => {
                let searchLabels = document.querySelectorAll('.dataTables_filter > label');

                searchLabels.forEach((label) => {
                    label.setAttribute('aria-label', 'Search/Filter Table');
                });
            }
        };
    }

  ngOnInit() {

        this.dataTablesInit();

        // Get the table data
        this.buildersService.getBuilders().subscribe((result: any) => {

            // Get all Rows
            let rows  = result.body.map(row => {

                let communities       = [],
                        communitiesColumn = [],
                        managersColumn    = [];

                        // Get the builders info and set up output
                    row.CommunityIDs.forEach((id) => {
                        this.communitiesService.getCommunity(id).subscribe((result: any) => {
                            communities.push(result.body);
                            communitiesColumn.push( result.body.Name );
                        });
                    });

                    row.Contacts.Managers.forEach((id) => {
                        this.contactsService.getContact(id).subscribe((result: any) => {
                            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)
        });
  }
}

Answer 1

这就是JavaScript一般的同步性，可以在顶层GET中使用关键字Async，在下层GET中使用Await关键字

例如：

//获取表格数据

  async this.buildersService.getBuilders().subscribe((result: any) => {

    ...
    //
     // Get the builders info and set up output

         row.CommunityIDs.forEach((id) => {
                    await    this.communitiesService.getCommunity(id).subscribe((result: any) => {
 ...
    //
      communities.push(result.body);
                            communitiesColumn.push( result.body.Name );
                        });
                    });

                    row.Contacts.Managers.forEach((id) => {
                        this.contactsService.getContact(id).subscribe((result: any) => {
                            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)
        });
  }
}