Angular 7 使用延迟加载后无法绑定(bind)

Question

我收到错误:

Can't bind to 'dataSource' since it isn't a known property of 'table'. ("][dataSource]="ordersList" matSort class="table table-bordered mat-elevation-z8 material-table">

以及在我实现延迟加载后出现的另一个子序列错误，如上面提到的:

这是我的代码: 应用程序模块.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    AppRoutingModule,

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'orders', loadChildren: './orders/orders.module#OrdersModule' },
  { path: '', redirectTo: '/orders', pathMatch: 'full' }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

订单路由.modules.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OrdersListComponent } from '../JobOrder/orders-list/orders-list.component';

const routes: Routes = [
  {
    path: '',
    component: OrdersListComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class OrdersRoutingModule { }

订单.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { OrdersRoutingModule } from './orders-routing.module';
import { OrdersListComponent } from '../JobOrder/orders-list/orders-list.component';

@NgModule({
  declarations: [OrdersListComponent],
  imports: [
    CommonModule,
    OrdersRoutingModule
  ]
})
export class OrdersModule { }

orders-list.component.ts

import { GetAllOrdersService } from './../../Services/JobOrder/get-all-orders.service';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { MatTableDataSource, MatSort } from '@angular/material';

@Component({
  selector: 'app-orders-list',
  templateUrl: './orders-list.component.html',
  styleUrls: ['./orders-list.component.css']
})
export class OrdersListComponent implements OnInit {
  ordersList: MatTableDataSource<any>;
  displayColumns: string[] = ['id', 'jobOrderStats', 'customerNameTxt', 'untMdlTxt', 'mobileTxt', 'wrty', 'wrtyDate', 'workshopName', 'createDate', 'actions'];
  @ViewChild(MatSort) sort: MatSort;
  constructor(private _getAllOrdersService: GetAllOrdersService, private _toastr: ToastrService) { }

  ngOnInit() {
    this._getAllOrdersService.GetAllOrders().subscribe(r => {
      if (r["code"] === "200") {
        this.ordersList = r["result"];
        this.ordersList.sort = this.sort;
      }
      else {
        this._toastr.error("Error occurred " + r["result"]);
      }
    });
  }

}

我在控制台中遇到的错误:

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'dataSource' since it isn't a known property of 'table'. ("][dataSource]="ordersList" matSort class="table table-bordered mat-elevation-z8 material-table">

问题更新!!

当我收到错误时说:

The pipe 'dateFormat' could not be found

我已经声明了一个共享模块:

import { DateFormatPipe } from './../../Pipes/date-format.pipe';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SharedRoutingModule } from './shared-routing.module';
import { ModuleWithProviders } from '@angular/compiler/src/core';

@NgModule({
  imports: [
    CommonModule,
    SharedRoutingModule,
  ],
  declarations: [DateFormatPipe],

  exports: [DateFormatPipe]
})
export class SharedModule {

}

然后我将其添加到订单模块的导入中:

import { SharedModule } from './../Modules/shared/shared.module';
import { DateFormatPipe } from './../Pipes/date-format.pipe';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { OrdersRoutingModule } from './orders-routing.module';
import { OrdersListComponent } from '../JobOrder/orders-list/orders-list.component';
import { QuillModule } from 'ngx-quill';
import { MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatDialogModule, MatFormFieldModule, MatCheckboxModule } from '@angular/material';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OrdersListComponent],
  imports: [
    CommonModule,
    OrdersRoutingModule,
    QuillModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatInputModule,
    MatDialogModule,
    MatFormFieldModule,
    MatCheckboxModule,
    NgbModule,
    SharedModule
  ],
  exports: []
})
export class OrdersModule { }

Answer 1

由于您使用的是 Material 表，因此您应该在 AppModule 或声明组件的模块中导入 MatTableModule。

@NgModule({
  imports: [
    MatTableModule
    ...
  ]
})
public class AppModule