0

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.

moken
  • 3,227
  • 8
  • 13
  • 23
Tomoko
  • 3
  • 2

0 Answers0