angular - @Viewchild 看不到matSort

标签 angular typescript datatables material-design viewchild

在我的 Angular 应用程序中,我的 @ViewChild 实例无法填充 HTL matSort。

我的组件.ts:

import { MatSort } from '@angular/material';

export class MyClassComponent {
     @ViewChild(MatSort) sort: MatSort;

}

ngOnInit() {
    console.log(this.sort); // undefined
}

我的组件.html:

<mat-table #table [dataSource]="dataSource" matSort>
           .......................................................
           .......................................................

</mat-table>

我需要使用 matSort 中的 sortChange,但返回时总是未定义。

最佳答案

它将在 AfterViewInit 中初始化并可用。生命周期钩子(Hook):

export class MyClassComponent implements AfterViewInit {
  @ViewChild(MatSort) sort: MatSort;

  ngAfterViewInit() {
    console.log(this.sort); // MatSort{}
  }
}

更多关于生命周期钩子(Hook)的信息在这里:https://angular.io/guide/lifecycle-hooks .

关于angular - @Viewchild 看不到matSort,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49311585/

相关文章:

angular - 使用 Reactive Forms 和 ChangeDetectionStrategy.OnPush 显示验证消息

unit-testing - 如何在 Jasmine 测试中模拟导出的 typescript 函数?

reactjs - 是否可以通过使用 HOC(高阶组件)在类组件中使用 React Hooks?

javascript - 数据表,使用从 json 检索的所需列的 URL 变量设置链接

javascript - 使用 jQuery 更新表后 DataTables fnFilter 不起作用

javascript - yadcf 过滤器不工作

node.js - 如何让 Visual Studio Typescript 1.7 智能感知与 Nodejs 库(Angular2、rxjs)一起使用?

angular - 在 Android 模拟器上运行 Ionic4/Capacitor 时如何调试 .ts 文件

angular - 如何在不弄乱下拉值的情况下使 Angular Reactive Formarray 中的级联下拉列表工作

angular - *ngFor对象比较使用 '==='