Question

我正在尝试简化使用自定义材质表组件创建表的过程，其中只需很少的代码，我就可以为每个不同的数据源创建一个非常自定义的表，并且已经附加了分页和排序功能。我只需要通过displayedColumns和data。基于示例here，我构建了此（https://stackblitz.com/edit/angular-kp2ryv），但是由于某些原因，在尝试使用自定义列组件时，StackBlitz出现错误。

错误TypeError：无法设置未定义的属性“名称”

这告诉我@ViewChild(MatColumnDef) columnDef: MatColumnDef;由于某种原因未读模板中的matColumnDef。

使用自定义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天的时间进行谷歌搜索，反复试验和出错，但我不知道为什么它没有阅读。

相同StackBlitz的工作叉，但没有自定义列组件https://stackblitz.com/edit/angular-jw9whh

Answer 1

这样做的原因是，您使用@angular/material模块中的物料指令定义了NgModule，但现在正尝试访问@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应该从同一模块导入。

Forked Stackblitz

具有自定义列的自定义Angular 6材质表组件

1 个答案: