Мне нужна помощь, чтобы решить эту проблему. Я новичок в угловом программировании.
Я начал изучать новый компонент Angular Material из примера.
Я нашел эту таблицу расширяемых матов, но когда я пытаюсь скомпилировать ее, эта ошибка показывает:
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';
}
Вот ссылка на образец, который я скопировал:
https://stackblitz.com/edit/angular-material2-expandable-rows-filter-pagination-sorting?file=app%2Ftable-example.html
Было бы хорошо, если бы вы, ребята, могли помочь.