Макет таблицы данных дизайна материала со статическими данными - PullRequest
Новая
       10

Макет таблицы данных дизайна материала со статическими данными

0 голосов
/ 05 июля 2018

Как я могу использовать макет таблицы данных дизайна материала без источника данных (статические данные)? Я не могу найти пример для этого варианта использования на 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)

Ответы [ 2 ]

0 голосов
/ 13 января 2019

Насколько я знаю, вы не можете использовать Material Table как обычную таблицу HTML. Вам понадобится источник данных.

Есть два способа получить стили таблицы материалов. Вы можете использовать Material Design Lite или с использованием стилей CSS из таблицы материалов.

Пожалуйста, обратитесь к этой теме Git Hub для решения. 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>
0 голосов
/ 07 января 2019

В вашем app.module.ts добавьте к провайдерам 

providers:[CdkColumnDef]

Добавить к импорту 

import { CdkColumnDef } from '@angular/cdk/table';
...