我需要帮助来解决这个问题。我是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 { }
这里是指令.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';
}
这是我复制的示例的链接:
如果你们能提供帮助,那就太好了。
根据事物的外观,您不会在正确的位置将正确的材料导入项目中。检查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
],