自定义角6材质表组件
自定义角6材质表组件
提问于 2018-10-16 22:50:51
我试图简化使用自定义材料表组件创建表的过程，在那里，我可以用非常少的代码为每个已经附加分页和排序的不同数据源创建一个非常自定义的表。我只需要通过displayedColumns和data。基于示例这里，我构建了该组件(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>我花了两天的时间在谷歌上搜索，尝试和错误，我不知道为什么它不读它。
相同StackBlitz的工作叉，但没有自定义列组件https://stackblitz.com/edit/angular-jw9whh
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-17 04:19:56
原因是您使用来自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应该从同一个模块中导入。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52844999
复制相关文章
相似问题
腾讯云开发者
