Angular 可扩展的角垫桌可以'；t绑定到'；cdkDetailRow'；错误

我需要帮助来解决这个问题。我不熟悉角度编程

我从一个例子开始学习一种新的角度材质组件

我找到了这个可扩展的mat表，但当我试图编译它时，此错误显示：

Uncaught Error: Template parse errors:
Can't bind to 'cdkDetailRow' since it isn't a known property of 'mat-row'.
1. If 'mat-row' is an Angular component and it has 'cdkDetailRow' input, then verify that it is part of this module.
2. If 'mat-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ader-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row" [ERROR ->][cdkDetailRow]="row" [cdkDetailRowTpl]="tpl">
        </mat-row>
    </mat-table>
"): ng:///AppModule/OrderDTComponent.html@37:90
Can't bind to 'cdkDetailRowTpl' since it isn't a known property of 'mat-row'.
1. If 'mat-row' is an Angular component and it has 'cdkDetailRowTpl' input, then verify that it is part of this module.
2. If 'mat-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("*matRowDef="let row; columns: displayedColumns;" matRipple class="element-row" [cdkDetailRow]="row" [ERROR ->][cdkDetailRowTpl]="tpl">
        </mat-row>
    </mat-table>
"): ng:///AppModule/OrderDTComponent.html@37:111
    at syntaxError (compiler.js:2426)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20600)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26146)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26133)
    at compiler.js:26076
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26076)
    at compiler.js:25986
    at Object.then (compiler.js:2417)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:25985)

这是指令

import {Directive, HostBinding, HostListener, Input, TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({
  selector: '[cdkDetailRow]'
})

export class CdkDetailRowDirective {
  private row: any;
  private tRef: TemplateRef<any>;
  private opened: boolean;

  @HostBinding('class.expanded')
  get expended(): boolean {
    return this.opened;
  }

  @Input()
  set cdkDetailRow(value: any) {
    if (value !== this.row) {
      this.row = value;
      // this.render();
    }
  }

  @Input('cdkDetailRowTpl')
  set template(value: TemplateRef<any>) {
    if (value !== this.tRef) {
      this.tRef = value;
      // this.render();
    }
  }

  constructor(public vcRef: ViewContainerRef) { }

  @HostListener('click')
  onClick(): void {
    this.toggle();
  }

  toggle(): void {
    if (this.opened) {
      this.vcRef.clear();
    } else {
      this.render();
    }
    this.opened = this.vcRef.length > 0;
  }

  private render(): void {
    this.vcRef.clear();
    if (this.tRef && this.row) {
      this.vcRef.createEmbeddedView(this.tRef, { $implicit: this.row });
    }
  }

}

以下是我复制的示例的链接：

---

如果你们能帮上忙，那就太好了。

从外观上看，你没有在正确的位置将正确的材料导入到项目中。检查，尤其是该部分

步骤3：导入组件模块

一旦您完成了本节中的所有操作，错误就会消失。在Angular中，仅导入组件是不够的，还必须导入正确的模块。如果您使用的是默认版本，并且没有添加其他模块，则文件将为app.module.ts

我在Stackblitz中注意到这是在main.ts中完成的，这可能会让您感到困惑

模块文件中的代码应如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule, 
    MatDialogModule,
    HttpClientModule,
    ToastrModule.forRoot(), 
    AgGridModule.withComponents([]),
    MatTableModule,
    MatInputModule,
    MatPaginatorModule,
    MatProgressSpinnerModule,
    MatSortModule,
    MatExpansionModule,
    MatTreeModule,
    NgxPaginationModule
  ],

注意到您已经这样做了，我已经检查了，它似乎不支持

cdkRowDetail

属性，这可能是导致错误的原因。您需要从HTML中删除

[cdkDetailRow]=“row”

绑定，以及

[cdkDetailRowTpl]=“tpl”

绑定，否则会出现其他错误

此外，您还需要初始化TypeScript文件app.component.ts中的所有变量。你应该能够直接复制stackblitz中的一个，没有问题，但是如果有什么不适合的话，请告诉我

如果需要使用stackblitz中的自定义行为，则需要从指令中复制代码，然后从“/app/cdk detail row.directive”导入{CdkDetailRowDirective}在你的app.module中。然后需要在同一文件中的声明数组中声明它

您的imports数组中不应该有CdkDetailRowDirective，因此您的@NgModule应该如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule, 
    MatDialogModule,
    HttpClientModule,
    ToastrModule.forRoot(), 
    AgGridModule.withComponents([]),
    MatTableModule,
    MatInputModule,
    MatPaginatorModule,
    MatProgressSpinnerModule,
    MatSortModule,
    MatExpansionModule,
    MatTreeModule,
    NgxPaginationModule
  ],

---

app.module.ts的外观>stackblitz示例中没有错误。一般来说，当您遇到此类错误时，这意味着组件/指令所在的特定模块（此处必须有包含cdkDetailRow的模块）尚未绑定到您的应用程序库中，为了快速响应，我已经发布了app.module.ts和app-component.ts代码@PrashantPimpale，非常感谢@Young Ninja的回复，我已经发布了完整的代码，我试图导入app.module.ts，但出现了错误：错误TS2305:module's“C:/Users/tkhun/Desktop/Angular7s/src/app/order dt/cdk detail row.directive”'没有导出的成员'cdkDetailRow'。让我在本地计算机上尝试此操作，并为您进行检查，确保我告诉您的是正确的。不过，首先要确保您已经运行了

npm安装--同时保存@angular/material@angular/cdk@angular/animations

。好的，我已经在我的机器上复制了这个问题，并且认为我理解了问题的原因。我注意到stackblitz中@angular/material的版本是6.3.2。能否确认package.json中显示的版本号？查看当前的Angular文档，您尝试访问的属性似乎不再存在（例如，cdkDetailRow不再是新Angular material表中的内容）。“@Angular/material”：“^7.3.2”，这是我的Angular material版本。我已更新了上面的答案。我相信从HTML中删除

[cdkDetailRow]=“row”

绑定以及

[cdkDetailRowTpl]=“tpl”

将解决您的问题。您还需要将适当的变量添加到app.component.ts中，否则会出现更多错误。