我想直接从 typescript 方法扩展行,我尝试使用 @viewchild 但它不起作用:
HTML:
<p-dataTable [value]="array" [responsive]="true" expandableRows="true" #dt
(onRowClick)="dt.toggleRow($event.data)">
<template let-test pTemplate="rowexpansion">
<div class="ui-grid ui-grid-responsive ui-fluid">
<div class="ui-grid-row">
Bouh !
</div>
</div>
</template>
<p-column field="name" header="Vin"></p-column>
<p-column field="company" header="Year"></p-column>
</p-dataTable>
<button class="btn" (click)="addComment()">
<p>add comment</p>
</button>
typescript :
import { DataTable } from 'primeng/components/datatable/datatable';
export class MyAwesomeComponent implements OnInit {
@ViewChild('dt') datatable : DataTable;
addComment(): void {
console.log(this.datatable);
this.datatable.toggleRow(1);
}
row 不会扩展,如果有人能告诉我如何做与 (onRowClick) 事件相同的事情但在 typescript 方法中,我将不胜感激。
最佳答案
有一个property expandedRows
是所有当前展开行的数组。您应该能够将行添加/删除到此列表以切换行扩展。
您需要:
<p-dataTable [expandableRows]="true" [expandedRows]="expandedItems"></p-dataTable>
和
expandedItems: Array<any> = new Array<any>();
// expand row
this.expandedItems.pop(this.gridData[rownumber]);
// hide row
this.expandedItems.push(this.gridData[rownumber]);
简单的 plunker,但你明白了...... https://plnkr.co/edit/Zra8UUMv4XQCv0lbRbMg?p=preview
关于angular - 如何以编程方式从数据表中扩展行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42838838/