Custom Angular 6 компонент таблицы материалов с пользовательскими столбцами - PullRequest
Новая
       10

Custom Angular 6 компонент таблицы материалов с пользовательскими столбцами

0 голосов
/ 17 октября 2018

Я пытаюсь упростить создание таблиц с помощью пользовательского компонента таблицы материалов, где с очень небольшим кодом я могу создать очень собственную таблицу для каждого отдельного источника данных с разбивкой на страницы и сортировку.Все, что я должен пройти, это displayedColumns и data.Основываясь на примерах здесь Я построил это (https://stackblitz.com/edit/angular-kp2ryv),, но по какой-то причине я получаю ошибку в StackBlitz при попытке использовать пользовательский компонент столбца.

ОШИБКА TypeError: Невозможно установить свойство 'name' из неопределенного

Из-за чего @ViewChild(MatColumnDef) columnDef: MatColumnDef; по какой-то причине не читает matColumnDef в шаблоне.

Пример создания таблицы сcustom comp: 

<dyn-table [data]="users" [displayedColumns]="displayedColumns">
    <dyn-col name="user_id"></dyn-col>
    <dyn-col name="user_name"></dyn-col>
</dyn-table>

Что заменит все это: 

<table mat-table #table [dataSource]="dataSource" class="table table-striped mat-elevation-z8">

    <ng-container matColumnDef="user_id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> User id </th>
        <td mat-cell *matCellDef="let data">{{ data.user_id }}</td>
    </ng-container>

    <ng-container matColumnDef="user_name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> User name </th>
        <td mat-cell *matCellDef="let data">{{ data.user_name }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator [pageSize]="10"></mat-paginator>

Я потратил 2 дня на поиски в Google, пробную версию и ошибки, и я не могу понять, почему он не читает это.

Рабочая вилка того же StackBlitz, но без пользовательских компонентов колонки https://stackblitz.com/edit/angular-jw9whh

1 Ответ

0 голосов
/ 17 октября 2018

Причина в том, что вы определили NgModule с материальными директивами из модуля @angular/material, но сейчас пытаетесь получить доступ к директиве из @angular/material/table модуля.

Просто небольшой тест: 

import {MatColumnDef} from '@angular/material/table';
import {MatColumnDef as RooColumnDef } from '@angular/material';

console.log(MatColumnDef, RooColumnDef, MatColumnDef === RooColumnDef);
                                                      ||
                                                     false

Таким образом, как вы можете догадаться, MatTableModule и MatColumnDef должны быть импортированы из одного и того же модуля.

Разветвленный стек-блиц

...