问题描述
限时送ChatGPT账号..如何使有角度的材料表中的行可展开?一个要求是我需要使用
解决方案如前所述
在mat-table
标签内,您必须使用带有matRipple
指令的mat-row
组件.当您单击一行时,该行元素将被分配给 expandedElement
变量:
</mat-row>
但是现在我们必须添加我们的展开行,默认情况下是隐藏的,如果用户点击上面的行就会显示:
<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"[@detailExpand]="row.element == expandElement ? 'expanded' : 'collapsed'"样式=溢出:隐藏"></mat-row>
重要的是这里已经提到的 when
谓词.这将调用在组件本身中定义的 isExpansionDetailRow
函数并检查该行是否具有 detailRow
属性:
isExpansionDetailRow = (row: any) =>row.hasOwnProperty('detailRow');
自 RC0 第一个参数是索引:
isExpansionDetailRow = (i: number, row: any) =>row.hasOwnProperty('detailRow');
如果你想对每一行都有一个展开的视图,你必须为每一行添加一个由 detailRow
属性标识的ExpansionDetailRow",如下所示:
connect(): Observable{常量行 = [];data.forEach(element => rows.push(element, { detailRow: true, element }));返回 Observable.of(rows);}
如果您将 rows
变量记录到控制台输出,它将如下所示:
使用指令的完整示例
Mat Table 可扩展行(排序、分页和过滤)
How would you make rows expandable in angular material tables? One requirement is that I need to be using the angular material table. I would also prefer to use the material accordion to the information provided here.
I want to click on row and show different information for each column. Im looking for something like below. If you click on row 1, rows 2 and 3 appear with different data.
解决方案As mentioned here by Andrew Seguin this is already feasible out of the box: using the when
predicate.
See this example: https://stackblitz/edit/angular-material-expandable-table-rows (thx to Lakston)
Inside of the mat-table
tag you have to use the mat-row
component with a matRipple
directive. When you click on a row the row element will be assigned to the expandedElement
variable:
<mat-row *matRowDef="let row; columns: displayedColumns;"
matRipple
class="element-row"
[class.expanded]="expandedElement == row"
(click)="expandedElement = row">
</mat-row>
But now we have to add our expanded row, that is hidden by default and will be shown if the user clicks on the row above:
<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
[@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
style="overflow: hidden">
</mat-row>
Important is here the already mentioned when
predicate. This calls a isExpansionDetailRow
function that is defined in the component itself and checks if the row has a detailRow
property:
isExpansionDetailRow = (row: any) => row.hasOwnProperty('detailRow');
Since RC0 the first param is the index:
isExpansionDetailRow = (i: number, row: any) => row.hasOwnProperty('detailRow');
If you want to have an expanded view for every row, you have to add an "ExpansionDetailRow" identified by the detailRow
property for every row like this:
connect(): Observable<Element[]> {
const rows = [];
data.forEach(element => rows.push(element, { detailRow: true, element }));
return Observable.of(rows);
}
If you would log the rows
variable to the console output, it will look like this:
EDIT: COMPLETE EXAMPLE USING DIRECTIVE
Mat Table expandable rows (sorting, pagination and filtering)
这篇关于角度 4 的可扩展表格行,带角度材料的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论