@Viewchild 看不到 matSort

Posted 2023-03-13

【中文标题】@Viewchild 看不到 matSort

【英文标题】：@Viewchild can not see matSort

【发布时间】：2018-08-24 23:31:31

【问题描述】：

在我的 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，但它总是返回 undefined。

【参考方案1】：

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

【讨论】：

static: false 是 @ViewChild 的默认值：angular.io/api/core/ViewChild

【参考方案2】：

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

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

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

【讨论】：

在我的例子中，设置 ViewChild 参数static: true 可确保当我在ngOnChanges() 中访问该属性时它具有一个值。您的回答为我指明了正确的方向

【参考方案3】：

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

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

【参考方案4】：

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

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  

【参考方案5】：

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

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

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

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

【讨论】：

没有进入ngAfterViewInit()方法，我实现了AfterViewInit并按照文档中的方式创建了方法，但是页面加载时没有进入方法。

它正在运行ngOnInit，但现在它没有运行ngAfterViewInit？检查拼写错误等......这种行为似乎很奇怪。

ngOnInit 使用此方法 this.sort 未定义，但使用ngAfterViewInit 方法...我不知道，因为执行中的方法调用都没有完成...没有拼写错误

我遇到了同样的问题.....但我的问题与 *ngIf 有关。看到这个答案https://***.com/a/48322035/2022096

我认为它已修复。最终，我需要将 MatSortModule 导入 @NgModule。我在我的组件中导入了 MatSortModule，但没有导入到 NgModule 中。