角材料テーブル： 'matRowDefColumn'にバインドできません

Question

角材料テーブルを使用しようとしています。モジュールをインポートしましたが、テンプレートの解析エラーが発生します。 HTML：コンポーネントで

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

    <ng-container matColumnDef="name"> 
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell> 
    <mat-cell *matCellDef="let project">{{project.name}}</mat-cell> 
    </ng-container> 

    <ng-container matColumnDef="key"> 
    <mat-header-cell *matHeaderCellDef> Key </mat-header-cell> 
    <mat-cell *matCellDef="let project">{{project.Key}}</mat-cell> 
    </ng-container> 

    <ng-container matColumnDef="reason"> 
    <mat-header-cell *matHeaderCellDef> reason </mat-header-cell> 
    <mat-cell *matCellDef="let project">{{project.reason}}</mat-cell> 
    </ng-container> 

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> 
    <mat-row *matRowDef="let row; column: displayedColumns;"></mat-row> 

</mat-table> 

輸入：

import { Component, OnInit } from '@angular/core'; 
import {Observable} from "rxjs" 
import { HttpClient, HttpErrorResponse } from '@angular/common/http'; 
import { ProjectService } from '../services/project.service'; 
import { UserService } from '../services/user.service'; 
import { Subject } from 'rxjs/Subject'; 
import { DataSource } from '@angular/cdk/collections'; 

データソース：

：私はapp.module.tsから returnDeadProjectList()

export class ProjectDataSource extends DataSource<any>{ 
constructor(private project:ProjectComponent){ 
    super(); 
} 

connect(): Observable<Project[]>{ 
return this.project.returnDeadProjectList(); 
} 

disconnect(){} 

輸入で観察として配列を返します

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { HttpClientModule } from '@angular/common/http'; 
import { CommonModule } from "@angular/common"; 
import 'hammerjs'; 
import { ProjectService } from './services/project.service'; 
import { UserService } from './services/user.service'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { FormsModule } from '@angular/forms'; 
import { MatInputModule, MatButtonModule, MatExpansionModule, MatDatepickerModule, MatNativeDateModule, MatToolbarModule, MatListModule, MatIconModule, MatProgressSpinnerModule, MatSlideToggleModule, MatTableModule, MatPaginatorModule } from '@angular/material'; 
import { AppComponent } from './app.component'; 
import { MyFormComponent } from './my-form/my-form.component'; 
import { BitbucketComponent } from './bitbucket/bitbucket.component'; 
import { UserComponent } from './user/user.component'; 
import { ProjectComponent } from './project/project.component'; 
import { CdkTableModule } from '@angular/cdk/table'; 

私が手

エラーは次のとおりです。

compiler.js:466 Uncaught Error: Template parse errors: 
Can't bind to 'matRowDefColumn' since it isn't a known property of 'mat-row'. 
1. If 'mat-row' is an Angular component and it has 'matRowDefColumn' 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. 

私はschemas: [ ],でCUSTOM_ELEMENTS_SCHEMAを記述する場合、私は別のエラーを取得：

compiler.js:466 Uncaught Error: Template parse errors: 
Property binding matRowDefColumn not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("` `<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> 
     [ERROR ->]<mat-row *matRowDef="let row; column: displayedColumns;"></mat-row> 

は、私が行方不明です何誰かのアイデアを持って？私は必要なすべての輸入品を持っている必要がありますが、何とかそれは要素を見つけることができません。さらに、私もあなたの.component.tsにし、app.module.shared.tsにこのコードを追加しますmatHeaderRowDef

Answer 1

を使用しないでください。それは私

import { 
    MatPaginator, MatSort, MatTable, MatTableModule, MatTabHeader, 
    MatHeaderRow, MatHeaderCell, MatHeaderCellDef, MatHeaderRowDef, 
    MatSortHeader, MatRow, MatRowDef, MatCell, MatCellDef, 
    _MatCell, _MatCellDef, _MatHeaderCellDef, _MatHeaderRowDef 
} from '@angular/material'; 
@NgModule({ 
    imports: [MatPaginator, MatSort, TableDataSource, 
     CdkTableModule, MatTable, MatTableModule], 
    schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], 
    declarations: [ 
     MatTabHeader, 
      MatHeaderRow, 
     MatHeaderCell, 
     MatHeaderCellDef, 
     MatHeaderRowDef, 
     MatSortHeader, 
      MatRow, 
     MatRowDef, 
     MatCell, 
     MatCellDef, 
     _MatCell, 
     _MatCellDef, 
     _MatHeaderCellDef, 
     _MatHeaderRowDef 
    ] 
})