8

CDK データ テーブルをマテリアル デザイン スタイルのデータ テーブルに変換しようとしています (参照: https://material.angular.io/components/table/overview ) が、cdk プレフィックスを md に変更すると、次のエラーが発生します...

キャッチされないエラー: テンプレート解析エラー: '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>

結果: ここまでは順調です ここに画像の説明を入力 が、「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>

結果: 壊れた :( ここに画像の説明を入力

MdTableModule と MdTable を含む他のモジュールをインポートしようとしましたが、それも役に立ちませんでした。何か案は？

PSこれが役立つ場合に備えて、私のメインの app.module.ts インポートステートメントです

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
 ]
4

3 に答える 3