angular - @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
}

我的组件.html：

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

</mat-table>

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

score 11 · Accepted Answer

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

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

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

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

score 6 · Accepted Answer

您可能已经在班级级别导入：

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

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

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

score 5 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

angular - @Viewchild 看不到 matSort

5 回答 5

Related

Reference