展开式Angular Mat表抛出无法绑定到'cdkDetailRow'错误

时间：2019-03-10 05:12:09

标签： angular angularjs-directive

我需要帮助来解决此问题。我是Angular编程的新手。

我从一个示例开始学习新的Angular Material组件。

我找到了这个可扩展的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)

这是app-module.ts代码

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule} from '@angular/forms'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { OrdersComponent } from './orders/orders.component';
import { OrderComponent } from './orders/order/order.component';
import { OrderItemsComponent } from './orders/order-items/order-items.component';
import { OrderService } from './shared/order.service';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatDialogModule} from '@angular/material/dialog';
import { HttpClientModule } from '@angular/common/http';
import { ToastrModule } from 'ngx-toastr';
import { AgGridModule } from 'ag-grid-angular/main';
import {MatTableModule, MatInputModule, MatPaginatorModule, MatProgressSpinnerModule, MatSortModule, MatTableDataSource } from '@angular/material';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatTreeModule} from '@angular/material/tree';
import { ItemsComponent } from './items/items.component';
import {NgxPaginationModule} from 'ngx-pagination';
import { ItemInsertComponent } from './items/item-insert/item-insert.component';
import { CustomerComponent } from './customer/customer.component';
import { UserComponent } from './user/user.component';
import { OrderDTComponent } from './order-dt/order-dt.component';
import {CdkDetailRowDirective} from './order-dt/cdk-detail-row.directive';

@NgModule({
  declarations: [
    AppComponent,
    OrdersComponent,
    OrderComponent,
    OrderItemsComponent,
    ItemsComponent,
    ItemInsertComponent,
    CustomerComponent,
    UserComponent,
    OrderDTComponent,
    CdkDetailRowDirective

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


  ],
  entryComponents:[OrderItemsComponent,ItemInsertComponent],
  providers: [OrderService],
  bootstrap: [AppComponent]
})
export class AppModule { }

此处是指令。

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 });
    }
  }

}

这是app-component.ts的代码

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular7s';
}

这是我复制的示例的链接：

https://stackblitz.com/edit/angular-material2-expandable-rows-filter-pagination-sorting?file=app%2Ftable-example.html

如果你们能提供帮助，那就太好了。

1 个答案:

答案 0 :(得分：0)

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

部分
  

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

现在注意到您已经执行了此操作，我已经检查了Angular Mat Table documentation，它似乎好像不支持cdkRowDetail属性，这很可能是导致您出错的原因。您将要从HTML删除[cdkDetailRow]="row"绑定，也要删除[cdkDetailRowTpl]="tpl"绑定，否则会收到其他错误。

此外，您还要初始化TypeScript文件app.component.ts中的所有变量。您应该可以直接将其复制到stackblitz中，而不会出现任何问题。

如果您需要使用stackblitz中的自定义行为，则需要复制指令中的代码，然后复制app.module中的import {CdkDetailRowDirective} from './app/cdk-detail-row.directive';。然后，您需要在同一文件的声明数组中对其进行声明。

您的导入数组中不应包含CdkDetailRowDirective，因此您的@NgModule应该如下所示：

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