web-dev-qa-db-ja.com

Angularマテリアルテーブルエラー： 'md-header-row'の既知のプロパティではないため、 'mdHeaderRowDef'にバインドできません

CDKデータテーブルをマテリアルデザインスタイルのデータテーブルに変換しようとしています（参照： https://material.angular.io/components/table/overview ）。ただし、変更するとmdkの前にcdkを付けると、次のエラーが発生します...

キャッチされないエラー：テンプレート解析エラー：「md-header-row」の既知のプロパティではないため、「mdHeaderRowDef」にバインドできません。 1.「md-header-row」がAngularコンポーネントであり、「mdHeaderRowDef」入力がある場合、それがこのモジュールの一部であることを確認します。2。「md-header-row 'はWebコンポーネントです。このコンポーネントの' @ NgModule.schemas 'に' CUSTOM_ELEMENTS_SCHEMA 'を追加して、このメッセージを抑制します。3.プロパティを許可するには、このコンポーネントの' @ NgModule.schemas 'に' NO_ERRORS_SCHEMA 'を追加します。

オンラインで見つけたすべての回答は、CdkTableModuleをインポートする必要があることを示していますが、そうしたことで、cdkテーブルは完全に機能します。

import {Component, OnInit, ViewChild} from '@angular/core';
import {DataSource} from '@angular/cdk';
import { CdkTableModule } from '@angular/cdk';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/map';

CdkTableModuleをインポートしていますが、cdkプレフィックスを使用すると、テーブルが期待どおりに表示されます...

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

  <ng-container cdkColumnDef="number">
    <md-header-cell *cdkHeaderCellDef> number </md-header-cell>
    <md-cell *cdkCellDef="let element"><a routerLink="{{element.number}}"> {{element.number}} </a></md-cell>
  </ng-container>

  <ng-container cdkColumnDef="book">
    <md-header-cell *cdkHeaderCellDef> book </md-header-cell>
    <md-cell *cdkCellDef="let element"> {{element.book}} </md-cell>
  </ng-container>

  <md-header-row *cdkHeaderRowDef="['number', 'book']"></md-header-row>
  <md-row *cdkRowDef="let row; columns: ['number', 'book']"></md-row>
</md-table>

結果：これまでのところ良い... enter image description here ただし、「cdk」を「md」に変更した場合

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

  <ng-container mdColumnDef="number">
    <md-header-cell *mdHeaderCellDef> number </md-header-cell>
    <md-cell *mdCellDef="let element"><a routerLink="{{element.number}}"> {{element.number}} </a></md-cell>
  </ng-container>

  <ng-container mdColumnDef="book">
    <md-header-cell *mdHeaderCellDef> book </md-header-cell>
    <md-cell *mdCellDef="let element"> {{element.book}} </md-cell>
  </ng-container>

  <md-header-row *mdHeaderRowDef="['number', 'book']"></md-header-row>
  <md-row *mdRowDef="let row; columns: ['number', 'book']"></md-row>
</md-table>

結果：壊れています：（enter image description here

MdTableModuleとMdTableを含む他のモジュールをインポートしようとしましたが、それも役に立たないことが証明されています。何か案は？

追伸これが役立つ場合の私のメインのapp.module.ts importステートメントです

imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule,
ReactiveFormsModule,
BrowserAnimationsModule,
MdAutocompleteModule,
MdButtonModule,
MdButtonToggleModule,
MdCardModule,
MdCheckboxModule,
MdChipsModule,
MdTableModule,
MdDatepickerModule,
MdDialogModule,
MdExpansionModule,
MdGridListModule,
MdIconModule,
MdInputModule,
MdListModule,
MdMenuModule,
MdCoreModule,
MdPaginatorModule,
MdProgressBarModule,
MdProgressSpinnerModule,
MdRadioModule,
MdRippleModule,
MdSelectModule,
MdSidenavModule,
MdSlideToggleModule,
MdSliderModule,
MdSnackBarModule,
MdSortModule,
MdTabsModule,
MdToolbarModule,
MdTooltipModule,
MdNativeDateModule,
CdkTableModule,
StyleModule
 ]
angularangular-materialangular-material2angular-datatablesangular-cdk
3
Joshua Craven

さらに1時間いじった後、私は走りました

npm update --save

@ angular/cdkと@ angular/materialを2.0.0-beta.10に更新しました

package.json

 "@angular/material": "^2.0.0-beta.10",
 "@angular/cdk": "^2.0.0-beta.10",

これによりいくつかの問題が発生したため、詳細を調べて、DataSourceおよびCdkTableModuleのインポートを更新する必要がありました。

       import { CdkTableModule} from '@angular/cdk/table';
       import {DataSource} from '@angular/cdk/table';

component.html

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

    <ng-container mdColumnDef="number">
      <md-header-cell *mdHeaderCellDef> number </md-header-cell>
      <md-cell *mdCellDef="let element"><a routerLink="{{element.number}}"> {{element.number}} </a></md-cell>
    </ng-container>

    <ng-container mdColumnDef="book">
      <md-header-cell *mdHeaderCellDef> book </md-header-cell>
      <md-cell *mdCellDef="let element"> {{element.book}} </md-cell>
    </ng-container>

    <ng-container mdColumnDef="s1">
      <md-header-cell *mdHeaderCellDef> S1 </md-header-cell>
      <md-cell *mdCellDef="let element"> {{element.sections[0] ? element.sections[0].type : ''}} {{element.sections[0] && element.sections[0].qs ? '('+element.sections[0].qs.length+')' : ''}}</md-cell>
    </ng-container>

    <ng-container mdColumnDef="s2">
      <md-header-cell *mdHeaderCellDef> S2 </md-header-cell>
      <md-cell *mdCellDef="let element"> {{element.sections[1] ? element.sections[1].type : ''}} {{element.sections[1] && element.sections[1].qs  ? '('+element.sections[1].qs.length+')' : ''}} </md-cell>
    </ng-container>

    <ng-container mdColumnDef="s3">
      <md-header-cell *mdHeaderCellDef> S3 </md-header-cell>
      <md-cell *mdCellDef="let element"> {{element.sections[2] ? element.sections[2].type : ''}} {{element.sections[2] && element.sections[2].qs ? '('+element.sections[2].qs.length+')' : ''}}</md-cell>
    </ng-container>

    <ng-container mdColumnDef="s4">
      <md-header-cell *mdHeaderCellDef> S4 </md-header-cell>
      <md-cell *mdCellDef="let element"> {{element.sections[3] ? element.sections[3].type : ''}} {{element.sections[3] && element.sections[3].qs ? '('+element.sections[3].qs.length+')' : ''}}</md-cell>
    </ng-container>

    <md-header-row *mdHeaderRowDef="['number', 'book', 's1', 's2', 's3', 's4']"></md-header-row>
    <md-row *mdRowDef="let row; columns: ['number', 'book', 's1', 's2', 's3', 's4']"></md-row>
  </md-table>

component.ts

 import {Component, OnInit} from '@angular/core';

 // Data Table imports.
     import { DataSource } from '@angular/cdk/table';
     import { Observable } from 'rxjs/Observable';
     import 'rxjs/add/observable/of';

 @Component({
   selector: 'app-start',
   templateUrl: './start.component.html',
   styleUrls: ['./start.component.css']
 })
 export class StartComponent implements OnInit {

   pts: Pt[];
   dataSource = new ExampleDataSource(this.ptService);
   constructor( public ptService: PtService ) { }
   ngOnInit() {
     this.pt = this.ptService.getPts();
   }
 }

 export class ExampleDataSource extends DataSource<any> {
   data = this.ptService.getPts();
   constructor( public ptService: PtService ) { super() }
   /** Connect function called by the table to retrieve one stream containing the data to render. */
   connect(): Observable<Pt[]> {
     return Observable.of(this.data);
   }
   disconnect() {}
 }

ふew！

13
Joshua Craven

app.module.tsにMatTableModuleをインポートする

import { MatTableModule } from '@angular/material/table';

@NgModule({
  imports: [
     MatTableModule
  ]
})
export class AppModule { }
2
Aneri Fumtiwala

「^ 2.0.0-beta.11」以降、mdで始まるすべてのセレクターは無効であり、matで置き換える必要があるため、すべてのセレクターを置き換える必要があります。マテリアルウェブサイトでは、ドキュメントはまだ更新されていないようです。

0
user1610308