Angular 无法绑定到“dataSource”，因为它不是“table”的已知属性，即使在导入模块时也是如此

我正在实现一个mat表ui。在我的app.module中，我导入了我的material.module，如下所示：

import { MaterialModule } from './material-design/material.module';
imports: [
    MaterialModule,
  ],

在实现此功能的组件中，我有以下代码：

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';

displayedColumns: string[] = ['PlateNumber', 'Purpose', 'Schedule', 'Select'];
dataSource: MatTableDataSource<ScheduledVehicleModel>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

getScheduledVhicles() {
    this.vs.getScheduledVhicles()
        .subscribe((data: any) => {
            this.dataSource = new MatTableDataSource(data);
            this.dataSource.paginator = this.paginator;
            this.dataSource.sort = this.sort;
        },
        err => {
            this.ts.error('Error in retrieving scheduled vehilces.');
        }
    );
}

这就是全部错误：

Uncaught Error: Template parse errors:
Can't bind to 'dataSource' since it isn't a known property of 'table'. ("

        <div class="mat-elevation-z8">
          <table mat-table [ERROR ->][dataSource]="dataSource" matSort>

            <!-- ID Column -->
"): ng:///AppModule/SecurityComponent.html@7:27
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24661)
    at JitCompiler._parseTemplate (compiler.js:34601)
    at JitCompiler._compileTemplate (compiler.js:34576)
    at eval (compiler.js:34477)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34477)
    at eval (compiler.js:34347)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34346)
syntaxError @ compiler.js:485
TemplateParser.parse @ compiler.js:24661
JitCompiler._parseTemplate @ compiler.js:34601
JitCompiler._compileTemplate @ compiler.js:34576
(anonymous) @ compiler.js:34477
JitCompiler._compileComponents @ compiler.js:34477
(anonymous) @ compiler.js:34347
then @ compiler.js:474
JitCompiler._compileModuleAndComponents @ compiler.js:34346
JitCompiler.compileModuleAsync @ compiler.js:34240
CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:239
PlatformRef.bootstrapModule @ core.js:5551
(anonymous) @ main.ts:13
../../../../../src/main.ts @ main.bundle.js:527
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:549
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1

这是整个组成部分

import { ToastrService } from 'ngx-toastr';
import { VehicleService } from './../../services/vehicle.service';
import { ScheduledVehicleModel } from '../../models/vehicle.model';
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';

@Component({
  selector: 'app-security',
  templateUrl: './security.component.html',
  styleUrls: ['./security.component.css']
})
export class SecurityComponent implements OnInit {
  // scheduledVehicles: ScheduledVehicleModel[];

  // TABLE
  displayedColumns: string[] = ['PlateNumber', 'Purpose', 'Schedule', 'Select'];
  dataSource: any;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(
    private vs: VehicleService,
    private ts: ToastrService
  ) { }

  ngOnInit() {
    this.getScheduledVhicles();
  }

  getScheduledVhicles() {
    this.vs.getScheduledVhicles()
      .subscribe((data: any) => {
        this.dataSource = new MatTableDataSource(data);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      },
      err => {
        this.ts.error('Error in retrieving scheduled vehilces.');
      }
    );
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

}

应该是

应该是

---

您正在使用的选择器（即表格）来自Angular v6。看起来您已经安装了Angular v5。在这种情况下，看看这个。您需要像这样使用它：

<mat-table #table [dataSource]="dataSource">

---

您正在使用的选择器（即表格）来自Angular v6。看起来您已经安装了Angular v5。在这种情况下，看看这个。您需要像这样使用它：

<mat-table #table [dataSource]="dataSource">

换衣服

<table #table [dataSource]="dataSource" mat-table> 

到

选中此项：

更改您的

<table #table [dataSource]="dataSource" mat-table> 

到

---

选中此项：

请以文本形式发布错误。此外，如果标题是您的错误，您应该使用mat table，而不是table。您还需要导入它的模块，以防您没有这样做。请参阅我的编辑先生。错误现在在文本文件中。谢谢。在这个例子中，它说我刚刚复制了它。你能发布你的整个模块代码吗？以及您的完整组件代码。请查看编辑。谢谢。请以文本形式发布您的错误。此外，如果标题是您的错误，您应该使用mat table，而不是table。您还需要导入它的模块，以防您没有这样做。请参阅我的编辑先生。错误现在在文本文件中。谢谢。在这个例子中，它说我刚刚复制了它。你能发布你的整个模块代码吗？以及您的完整组件代码。请查看编辑。谢谢你，比你还好。我现在可以看到桌子了。但我看不到表中的数据。谢谢。我现在可以看到桌子了。但我看不到表中的数据。我可以在我的控制台上看到它，不过使用这个…`console.logthis.dataSource.data`比你强。我现在可以看到桌子了。但我看不到表中的数据。谢谢。我现在可以看到桌子了。但我看不到表中的数据。我可以在我的控制台上看到它，不过使用这个…`console.logthis.dataSource.data`

<table #table [dataSource]="dataSource" mat-table> 

<mat-table #table [dataSource]="dataSource">