@Viewchild can not see matSort

问题

In my Angular application, my @ViewChild instance is failing to fill 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>

I need to use sortChange from matSort but it is always returned undefined.

回答1:

It will be initialized and available in the AfterViewInit lifecycle hook:

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

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

More info on lifecycle hooks here: https://angular.io/guide/lifecycle-hooks.

回答2:

You have probably already imported at the class level with:

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

This makes the types MatSort and MatTableDataSource available within your .ts class. However, you are also trying to use the related modules as directives in your component's .html file, to do this your app.module.ts needs to be importing them, I do this with a separate NgModule that imports all of the material components I use i.e.

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 { }

回答3:

I'm working with angular 7 what solved the issue for me was adding MatSortModule in the app.modules.ts. The error I got is the one mentioned here. No indication appeared about the MatSortModule being missing.

Original answer here: Angular 5 - Missing MatSortModule

回答4:

In Angular 8 I had to use a setter and optional parameter static=false:

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

I found the answer from here: https://stackoverflow.com/a/47519683/3437868 https://github.com/angular/components/issues/15008#issuecomment-516386055

来源：https://stackoverflow.com/questions/49311585/viewchild-can-not-see-matsort

标签

angular

typescript

datatables

material-design

viewchild