I have 2 tables, 'Factory' and 'Cars' with 'Cars' nested in factory. I need a dynamic table for 'Cars', because I can't save one ref for many tables. In UI I have #CarsTemplateTable in p-table and I set unique id for each 'Cars' (RowUniqueId from parent table)
[attr.id]="'carsTemplateTable-' + row.rowUniqueId"
<p-table #stationsTemplateTable [scrollable]="scrollable" [responsive]="true" responsiveLayout="stack" [breakpoint]="breakpoint" scrollDirection="both" class="cell-center" [attr.id]="'carsTemplateTable-' + row.rowUniqueId" [value]="row.cars" dataKey="rowUniqueId" editMode="row" [loading]="isBusy">
@ViewChildren('CarsTemplateTable', {read: ElementRef}) CarsTemplateTablesRef: QueryList<ElementRef<Table>>;
@ViewChild('FactoriesTemplateTable') FactoriesTemplateTableRef: Table;
When I try to add station, I get elementRef
for table by parent uniqueId
, and it returns but I can't call initRowEdit(row)
method for this table, because initRowEdit from { Table } 'primeng/table'
and can't apply for ElementRef
.
startStationTemplatesRowEditing(mainRow: FactoryTemplateRow,row: CarTemplateRow): void {
this.editedCarSnapshots[row.rowUniqueId] = {
...row,
data: { ...row.data },
};
row.editing = true;
this.carsTemplateTablesRef.toArray().forEach((tableRef: ElementRef) => {
let table = tableRef.nativeElement;
let tableParentId = table.id;
if (tableParentId === `carsTemplateTable-${mainRow.rowUniqueId}`) {
table.initRowEdit(row);//wrong
}
});
}
How I can call initRowEdit
for my row?
I tried to write different variations for calling the method, but unfortunately got stuck.