angular - 具有自定义列的自定义 Angular 6 材质表组件
问题描述
我正在尝试使用自定义材料表组件简化创建表,其中只需很少的代码,我就可以为每个不同的数据源创建一个非常自定义的表,并且已经附加了分页和排序。我必须通过的是displayedColumns
和data
。根据此处的示例,我构建了这个(https://stackblitz.com/edit/angular-kp2ryv),但由于某种原因,我在尝试使用自定义列组件时在 StackBlitz 中遇到错误。
错误类型错误:无法设置未定义的属性“名称”
这告诉我由于某种原因@ViewChild(MatColumnDef) columnDef: MatColumnDef;
没有阅读模板中的内容。matColumnDef
使用自定义组合创建表示例:
<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
解决方案
原因是您使用模块中的材料指令定义了 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
应该从同一个模块中导入。
推荐阅读
- python - How to specify timeout for firebase.put() in python?
- c# - 我应该如何像游戏“Lingo”一样为字母着色
- spring-boot - Not able to establish connection to the kerberos and SASL enabled kafka producer
- python - Comparing between entries in a list of lists using correct indexes
- nestjs - NESTJS 中的 TypeORM 实体 - 无法在模块外使用导入语句
- javascript - 我们可以在javascript中单击事件完成后执行操作吗?
- android - 从服务器转储数据库是不可能的吗?
- python - 如何制作打印和清除按钮 GUI,在 Python 中打印和清除标签?
- oracle - 下拉过滤器级别明智
- python - 如何在每辆车上独立更改 x 和 y 轴的值?