Angular 如何使NgbSortableHeader以编程方式对引导表进行排序？

我有一个引导html表（由ngbootstrap for angular提供支持，并使用NgbdSortableHeader通过列单击对表列进行排序）。当我单击元素时，它会对列进行升序、降序或“”（无）排序

HTML表格标题

 <tr>
    <th scope="col">#</th>
    <th scope="col" sortable="name" (sort)="onSort($event)">Country</th>
    <th scope="col" sortable="area" (sort)="onSort($event)">Area</th>
    <th scope="col" sortable="population" (sort)="onSort($event)">Population</th>
  </tr>

但是当这个onSort方法在onInit（）中调用时，它就不起作用了。我如何通过调用onSort函数以编程方式使它起作用呢

---

工作stackblitz示例：

您需要使用

AfterViewInit

而不是

OnInit

，因为在调用

OnInit

点尚未呈现表格

AfterViewInit

在呈现组件（以及任何子组件）后调用，因此可以在该点对表进行排序（ref:）

如果希望在按编程方式排序时显示方向箭头，还需要更改从以下位置进行排序的代码：

this.onSort({ column: "population", direction: "asc" });

致：

行

populationHeader.direction=“asc”将确保您获得表中标题列上的排序箭头

这意味着
NgbdTableSortable
变为：

export class NgbdTableSortable implements AfterViewInit {

  ngAfterViewInit() {
    console.log("afterViewInit working");
    let populationHeader = this.headers.find(h => h.sortable === "population");
    populationHeader.sort.emit({ column: "population", direction: "asc" });
    populationHeader.direction = "asc";
  }
 
  ...
}

请参见演示。
您需要使用
AfterViewInit
而不是
OnInit
，因为在调用
OnInit
时尚未呈现表格
AfterViewInit
在呈现组件（以及任何子组件）后调用，因此可以在该点对表进行排序（ref:）

如果希望在按编程方式排序时显示方向箭头，还需要更改从以下位置进行排序的代码：

this.onSort({ column: "population", direction: "asc" });

致：

行
populationHeader.direction=“asc”将确保您获得表中标题列上的排序箭头

这意味着
NgbdTableSortable
变为：

export class NgbdTableSortable implements AfterViewInit {

  ngAfterViewInit() {
    console.log("afterViewInit working");
    let populationHeader = this.headers.find(h => h.sortable === "population");
    populationHeader.sort.emit({ column: "population", direction: "asc" });
    populationHeader.direction = "asc";
  }
 
  ...
}

请查看演示。
令人印象深刻，但我看不到在单击后出现的标题名称附近的箭头对不起，我没有发现它们不在那里。更新了标题栏上箭头的排序和获取方法，但我看不到标题名称附近的箭头，它出现在单击之后。对不起，我没有发现它们不在那里。更新了答案，说明如何排序和获取标题列上的箭头
export class NgbdTableSortable implements AfterViewInit {

  ngAfterViewInit() {
    console.log("afterViewInit working");
    let populationHeader = this.headers.find(h => h.sortable === "population");
    populationHeader.sort.emit({ column: "population", direction: "asc" });
    populationHeader.direction = "asc";
  }
 
  ...
}