Question

我正在实现mat-table 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.');
        }
    );
}

在我的html中，我收到此错误：

这是在我的material.module中

能帮我解决这个问题吗？我可能会缺少一些东西。非常感谢。

这是整个材料。

import { NgModule } from "@angular/core";
import { CommonModule } from '@angular/common';
import { 
    MatButtonModule,
      MatToolbarModule,
      MatInputModule,
      MatProgressSpinnerModule,
      MatCardModule,
      MatCheckboxModule,
      MatTabsModule,
      MatSidenavModule,
      MatIconModule,
      MatGridListModule,
      MatFormFieldModule,
      MatSelectModule,
      MatSnackBarModule,
      MatExpansionModule,
      MatDividerModule,
      MatMenuModule,
      MatDialogModule,
      MatPaginatorModule,
      MatSortModule,
      MatTableModule,
      MatPaginator,
      MatSort,
      MatTable,
      MatAutocompleteModule,
      MatDatepickerModule,
      MatNativeDateModule,
      MatRadioModule,
      MatProgressBarModule,
      MatListModule
 } from '@angular/material';

@NgModule({
    imports: 
    [
        MatButtonModule,
        MatToolbarModule,
        MatInputModule,
        MatProgressSpinnerModule,
        MatCardModule,
        MatSidenavModule,
        MatCheckboxModule,
        MatTabsModule,
        MatIconModule,
        MatGridListModule,
        MatFormFieldModule,
        MatSelectModule,
        MatSnackBarModule,
        MatExpansionModule,
        MatDividerModule,
        MatMenuModule,
        MatDialogModule,
        MatPaginatorModule,
        MatSortModule,
        MatTableModule,
        MatAutocompleteModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatRadioModule,
        MatProgressBarModule,
        MatListModule
    ],
    exports: 
    [
        MatButtonModule,
        MatToolbarModule,
        MatInputModule,
        MatProgressSpinnerModule,
        MatCardModule,
        MatSidenavModule,
        MatCheckboxModule,
        MatTabsModule,
        MatIconModule,
        MatGridListModule,
        MatFormFieldModule,
        MatSelectModule,
        MatSnackBarModule,
        MatExpansionModule,
        MatDividerModule,
        MatMenuModule,
        MatDialogModule,
        MatPaginatorModule,
        MatSortModule,
        MatTableModule,
        MatAutocompleteModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatRadioModule,
        MatProgressBarModule,
        MatListModule
    ]
})
export class MaterialModule {}

这是整个错误：

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

这是整个app.module

import { VehicleService } from './starter/services/vehicle.service';
import { GeneralparametersService } from './starter/services/generalparameters.service';
import { AdminModule } from './admin/admin.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

// COMPONENTS
import { AppComponent } from './app.component';
import { StarterComponent } from './starter/starter.component';
import { StarterHeaderComponent } from './starter/starter-header/starter-header.component';
import { StarterLeftSideComponent } from './starter/starter-left-side/starter-left-side.component';
import { StarterContentComponent } from './starter/starter-content/starter-content.component';
import { StarterFooterComponent } from './starter/starter-footer/starter-footer.component';
import { StarterControlSidebarComponent } from './starter/starter-control-sidebar/starter-control-sidebar.component';
import { LoginComponent } from './starter/pages/login/login.component';

// ROUTES
import { applicationRoutes } from './starter/routes/routes';

// ANGULAR MATERIAL
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material-design/material.module';

// PAGES
import { CameraComponent } from './starter/pages/camera/camera.component';

// TOASTER
import { ToastrModule } from 'ngx-toastr';

// DIALOGS
import { ConfirmComponent } from './dialogs/confirm/confirm.component';

// SERVICES
import { UserService } from './starter/services/user.service';

// GUARDS
import { AuthGuard } from './authorization/auth.guard';
import { AuthInterceptor } from './authorization/auth.interceptor';
import { SecurityComponent } from './starter/pages/security/security.component';
@NgModule({
  declarations: [
    AppComponent,
    StarterComponent,
    StarterHeaderComponent,
    StarterLeftSideComponent,
    StarterContentComponent,
    StarterFooterComponent,
    StarterControlSidebarComponent,
    CameraComponent,
    ConfirmComponent,
    LoginComponent,
    SecurityComponent,
  ],
  imports: [
    BrowserModule,
    AdminModule,
    BrowserAnimationsModule,
    MaterialModule,
    RouterModule.forRoot(applicationRoutes),
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot(),
    HttpClientModule
  ],
  providers: [
    UserService,
    GeneralparametersService,
    VehicleService,
    AuthGuard,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ],
  entryComponents: [
    ConfirmComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是整个组成部分

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();
    }
  }

}

Answer 1

<table>应该是<mat-table>

<mat-table [dataSource]='dataSource' matSort>
  ...
</mat-table>

Answer 2

您正在使用的选择器，即 table 来自Angular v6。看起来您已经安装了Angular v5。在这种情况下，请查看此V5 Mat-Table Example。您需要像这样使用它：

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

Answer 3

更改您的

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

到

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

检查以下内容：https://github.com/angular/material2/issues/7845

无法绑定到“数据源”，因为即使导入模块也不是“表”的已知属性

3 个答案: