@Viewchild 看不到matSort

Question

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

mycomponent.ts:

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

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

}

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

mycomponent.html:

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

</mat-table>

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

Answer 1

它将在 AfterViewInit 生命周期挂钩中初始化并可用：

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

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

有关生命周期挂钩的更多信息：https://angular.io/guide/lifecycle-hooks。

Answer 2

您可能已经在 class 级别导入了：

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

这使得类型 MatSort 和 MatTableDataSource 在您的 .ts class 中可用。但是，您还尝试将相关模块用作组件的 .html 文件中的指令，为此，您的 app.module.ts 需要导入它们，我使用单独的 NgModule 导入所有我使用的 material 个组件，即

material\material.module.ts

import { NgModule } from '@angular/core';

import {
  MatTableModule,
  MatSortModule, 
} from '@angular/material';

@NgModule({
  imports: [
      MatTableModule,
      MatSortModule, 
    ],
  exports: [
      MatTableModule,
      MatSortModule, 
    ]
})
export class MaterialModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';

import { MaterialModule } from './material/material.module';
import { AppComponent } from './app.component';
import { myComponent } from './my/my.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule,
    BrowserAnimationsModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 3

我正在使用 angular 7 为我解决问题的方法是在 app.modules.ts[=17 中添加 MatSortModule =].我得到的错误是这里提到的那个。没有迹象表明缺少 MatSortModule。

原始答案在这里： Angular 5 - Missing MatSortModule

Answer 4

在 Angular 8 中，我不得不使用 setter 和可选参数 static=false:

   @ViewChild(MatSort, {static: false})
   set sort(sort: MatSort) {
      this.sortiments.sort = sort;
      this.selectedSortiments.sort = sort;
   }

我从这里找到了答案： https://github.com/angular/components/issues/15008#issuecomment-516386055

Answer 5

您必须添加 @ViewChild(MatSort,{static:false}) sort: MatSort;
确保您的 table 模板中没有 *ngIf 目录

@Viewchild 看不到matSort

@Viewchild can not see matSort

angular

typescript

datatables

material-design

viewchild