Данные сброса таблицы PrimeNG для новой строкиРазвернуть - PullRequest
0 голосов
/ 18 июня 2020

У меня есть таблица с данными о потоках, а на ее rowExpand вложенная таблица. Данные вложенной таблицы зависят от значения параметра родительского элемента (числа). Допустим, если число равно 1, вложенная таблица будет иметь 4 подпотока (черный, зеленый, синий, розовый). Если число равно 2, вложенная таблица будет иметь 3 подпотока (желтый, синий, красный) и так далее. Первая таблица использует потоки как значение, вторая - подпотоки.

Проблема в том, что когда я расширяю строку, все предыдущие развернутые строки обновляют там данные, чтобы быть такими же, как последние развернутые.

Является можно ли развернуть строку и отобразить ее вложенную таблицу без обновления предыдущих вложенных таблиц?

Вот мой код:

html первая таблица


<p-table #table styleClass="ui-table-tbody" [columns]="cols" [value]="flows" dataKey="flowId" [rows]="20"
        [rowsPerPageOptions]="[20, 50, 100, { showAll: 'All' }]" (onRowExpand)="getSubFlows($event,data)"
        paginatorPosition=both [paginator]="true">

        <ng-template pTemplate="paginatorright" let-state>
        </ng-template>

        <ng-template pTemplate="header" let-columns>
            <tr>
                <th style="width: 2.25em"></th>
                <th *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
                    {{col.header}}

                </th>
            </tr>
        </ng-template>

        <ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
            <tr [ngClass]="rowData.status ==='ERROR' ? 'red' : rowData.status ==='WARNING' ? 'yellow' : 'blue'">



                <td>
                    <a href="#" [pRowToggler]="rowData">
                        <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
                    </a>
                </td>

                <td [ngClass]="{'center' : (col.field ==='checked' || col.field ==='status') }"
                    *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
                    {{rowData[col.field]}}

                    <p-column field="checked">
                        <ng-template let-row="rowData" let-index="rowIndex" let-col pTemplate="body">
                            <input type="checkbox" [(ngModel)]="row[col.field]" />
                        </ng-template>
                    </p-column>
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
            <tr>
                <td [attr.colspan]="columns.length + 1">
                    <p-table [columns]="cols2" [value]="subflows">
                        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" [ngStyle]="{'width': col.width}" [ngClass]='height'>
                    {{col.header}}
                </th>

            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [ngClass]="rowData.type ==='ERROR' ? 'red' : 'blue'">
                <td class="my-center-text" *ngFor="let col of columns; let i = index"
                    [attr.rowspan]="rowData.component.index === 1 ? 2 : 1"
                    [ngClass]="{'center' : (col.field ==='detail' || col.field ==='objet' || col.field ==='messageT' || col.field === 'etape')}">


                    {{rowData[col.field]}}

                    <button pButton style="height:30px;" *ngIf="col.field === 'detail'   " label="Détails"
                        (click)="show(rowData)" class="ui-button-secondary"></button>


                    <button pButton style="height:30px;" icon="pi pi-search" *ngIf="col.field === 'objet'   "
                        (click)="objet($event,data)" class="ui-button-secondary"></button>

                    <button pButton style="height:30px;" icon="pi pi-search" *ngIf="col.field === 'messageT'   "
                        (click)="checked($event,data)" class="ui-button-secondary"></button>

                </td>



            </tr>
        </ng-template>
    </p-table>
    </td>
    </tr>
    </ng-template>


    </p-table>        paginatorPosition=both [paginator]="true">

        <p-table [columns]="cols2" [value]="subflows">
                        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" [ngStyle]="{'width': col.width}" [ngClass]='height'>
                    {{col.header}}
                </th>
        </p-table>
       </td>
           </tr>
    </ng-template>
    </p-table>


мой component.ts

 getSubFlows(data) {
    this.subflows = [];
    this.datas2 = [];
    this.subflowsByFlowId = [];
    console.log("hello", data);
    this.flowService.fetchSubFlowsByFlow(data.data.flowId).subscribe(
      datas2 => {
        this.datas2 = datas2;
        for (let i = 0; i < this.datas2.length; i++) {
          this.subflows.push({

            date: datas2[i].ClientLogTimeStamp,
            type: datas2[i].LogRole,
            code: datas2[i].Code,
            message: datas2[i].TXT,
            component: datas2[i].Component,
            etape: datas2[i].Etape,
            detail: "",
            objet: "",
            messageT: "",
            logId: datas2[i].LogId
          });

        }


        this.subflowsByFlowId.push({
          SubFlow : this.subflows,
          FlowId: data.data.flowId

        });

        console.log("hello8", this.subflowsByFlowId);
        console.log("hi6", this.subflows);


      });


    this.cols2 = [
      { field: 'date', header: 'Date', width: '10%' },
      { field: 'type', header: 'Type', width: '4%' },
      { field: 'code', header: 'Code', width: '9%' },
      { field: 'message', header: 'Message', width: '47%' },
      { field: 'component', header: 'Component', width: '13%' },
      { field: 'etape', header: 'Etape', width: '4%' },
      { field: 'detail', header: '', width: '6%' },
      { field: 'objet', header: 'Objet', width: '4%' },
      { field: 'messageT', header: 'Message Technique', width: '6%' }, 0.

    ];

  }

Большое спасибо за любой ответ :)

...