web-dev-qa-db-ja.com

静的データを使用したマテリアルデザインデータテーブルのレイアウト

データソース（静的データ）なしでマテリアルデザインデータテーブルレイアウトを使用するにはどうすればよいですか？ https://material.angular.io/components/table/examples でこのユースケースの例を見つけることができません。たとえば、私は成功せずに次のことを試みました。

<mat-table>
 <mat-header-row>
  <mat-header-cell>One</mat-header-cell>
  <mat-header-cell>Two</mat-header-cell>
 </mat-header-row>
 <mat-row>
  <mat-cell>aaa</mat-cell>
  <mat-cell>bbb</mat-cell>
 </mat-row>
</mat-table>

次のエラーが発生します：

LeistungenComponent.html:195 ERROR Error: StaticInjectorError(AppModule)[MatCell -> CdkColumnDef]: 
  StaticInjectorError(Platform: core)[MatCell -> CdkColumnDef]: 
    NullInjectorError: No provider for CdkColumnDef!
    at NullInjector.Push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:979)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.Push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.Push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveNgModuleDep (core.js:9238)
    at NgModuleRef_.Push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9919)
    at resolveNgModuleDep (core.js:9238)
angularangular-materialmaterial-designmat-tab
6
surfspider

App.module.tsで、プロバイダーに追加します

providers:[CdkColumnDef]

インポートに追加

import { CdkColumnDef } from '@angular/cdk/table';
3
Vedha Peri

私の知る限り、通常のHTMLテーブルのようにマテリアルテーブルを使用することはできません。データソースが必要になります。

ただし、マテリアルテーブルのスタイルを取得するには2つの方法があります。 Material Design Lite を使用するか、MaterialTableのcssスタイルを使用できます。

解決策については、このGitHubスレッドを参照してください。 https://github.com/angular/material2/issues/3805

<style>
.mat-table {
  display: block;
  font-family: Tahoma, Verdana;
}

.mat-row,
.mat-header-row {
  display: flex;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
}

.mat-cell,
.mat-header-cell {
  flex: 1;
  overflow: hidden;
  Word-wrap: break-Word;
}
</style>

<div class="mat-table">
  <div class="mat-header-row">
    <div class="mat-header-cell">One</div>
    <div class="mat-header-cell">Two</div>
    <div class="mat-header-cell">Three</div>
  </div>
  <div class="mat-row">
    <div class="mat-cell">AAA</div>
    <div class="mat-cell">BBB</div>
    <div class="mat-cell">CCC</div>
  </div>
</div>
1
Manoj De Mel