angular - 可扩展的 Angular mat 表抛出 Can't bind to 'cdkDetailRow' 错误
问题描述
我需要帮助来解决这个问题。我是 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 { }
这里是directive.ts
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';
}
这是我复制的示例的链接:
如果你们能帮忙就好了。
解决方案
从外观上看,您没有在正确的位置将正确的材料导入项目。检查此链接,特别是该部分
第三步:导入组件模块。
完成本节中的所有操作后,错误应该会消失。在 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 文档,它似乎cdkRowDetail
不支持该属性,这可能是导致您的错误的原因。您需要[cdkDetailRow]="row"
从 HTML 中删除绑定,以及[cdkDetailRowTpl]="tpl"
绑定,否则您将收到不同的错误。
此外,您还需要初始化 TypeScript 文件 app.component.ts 中的所有变量。您应该可以直接复制 stackblitz 中的那个而不会出现问题,但如果有任何问题,请告诉我。
如果您需要使用 stackblitz 中的自定义行为,您需要从指令中复制代码,然后import {CdkDetailRowDirective} from './app/cdk-detail-row.directive';
在您的 app.module 中。然后,您需要在同一文件的声明数组中声明它。
您的导入数组中不应包含 CdkDetailRowDirective,因此您的 @NgModule 应如下所示:
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
BrowserAnimationsModule,
MatDialogModule,
HttpClientModule,
ToastrModule.forRoot(),
AgGridModule.withComponents([]),
MatTableModule,
MatInputModule,
MatPaginatorModule,
MatProgressSpinnerModule,
MatSortModule,
MatExpansionModule,
MatTreeModule,
NgxPaginationModule
],
推荐阅读
- django - Django:显示对象属性的预览 - 基于类的视图
- c# - c#中如何在调用方法之外使用ref变量
- git - 在我 rebase 然后同步之后,历史记录在 PR 中翻倍并显示不相关的更改
- eclipse-hono - Eclipse Hono - 在终端中启动命令行客户端以发送命令时出现 ConnectTimeoutException
- html - Angular 材质 - 菜单 A 的菜单点击事件也被用于菜单 B
- python - 从python中的其他文件导入函数
- kubernetes - 是否有可能找出哪个用户上传了 kubernetes 机密?
- javascript - 不检查获取请求是否失败是一种不好的做法吗?
- javascript - React 中的香草 CSS?
- reactjs - 此 ReactJs 示例中如何使用此变量