0

我正在使用带有行扩展的 Prime ng 表，但我认为问题出在我的数据键上。如果我使用 Munit.id，当我使用 dataKey="id" 时，行不会扩展所有行都会扩展而不是一个

.html 文件

<p-table #dt  dataKey= "id" [columns]="cols" [value]="mUnit" [paginator]="true" [rows]="5" [showCurrentPageReport]="true"
      paginatorright currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
      [rowsPerPageOptions]="[5,10,15]" [globalFilterFields]="['mUnitName']" rowExpandMode="single" expandableRows="true"
      styleClass="p-datatable-striped" #tableContextMenu>

      <ng-template pTemplate="caption" class=" hidden">
        <div class=" grid justify-content-between   ">

          <span class="p-input-icon-left">
            <i class="pi pi-search"></i>
            <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')"
              placeholder="Search keyword" />
          </span>

          <span class="wrap ml-auto ">
            <button mat-button class='bd ' (click)="routed()">Add</button>
            <button mat-button class='bd' (click)="print()">Print</button>
          </span>

        </div>
      </ng-template>

      <ng-template pTemplate="header" let-columns>

        <tr>
          <!-- <th pSortableColumn="id">ID <p-sortIcon field="id"></p-sortIcon></th>
            <th pSortableColumn="Name">ID <p-sortIcon field="mUnitName"></p-sortIcon></th> -->
          <th style="width: 2.25e ml"></th>

          <th *ngFor="let col of columns" pSortableColumn="{{col.field}}">
            {{col.header}}

            <p-sortIcon field="{{col.field}}"></p-sortIcon>
            <p-columnFilter type="text" field="{{col.field}}" display="menu"></p-columnFilter>
          </th>

        </tr>
      </ng-template>

      <ng-template pTemplate="body" let-rowData let-columns="columns" let-expanded="expanded">

        <tr>
          <!-- (click)="showIt(rowData)" -->
          <td>

            <button type="button" pButton pRipple [pRowToggler]="columns"
              class="p-button-text p-button-rounded p-button-plain"
              [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>


          </td>
          <td *ngFor="let col of columns">

            {{rowData[col.field]}}

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


      <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
        <tr>
          <td colspan="3">
            <div class="p-3">
              <div>its row</div>

               <p-table [value]="mUnit" dataKey="id">
                <ng-template pTemplate="header">
        <tr>
          <th *ngFor="let col of columns" pSortableColumn="{{col.field}}">
            {{col.header}}

            <p-sortIcon field="{{col.field}}"></p-sortIcon>
            <p-columnFilter type="text" field="{{col.field}}" display="menu"></p-columnFilter>
          </th>

          <th style="width: 4rem"></th>

        </tr>
      </ng-template>

      <ng-template pTemplate="body" let-rowData let-columns="columns">

        <tr>
          (click)="showIt(rowData)"
          <td>
            <button type="button" pButton pRipple [pRowToggler]="rowData"
              class="p-button-text p-button-rounded p-button-plain"
              [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
          </td>
          <td *ngFor="let col of columns">

            {{rowData[col.field]}}

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


      <ng-template pTemplate="emptymessage">
        <tr>
          <td colspan="6">There are no order for this product yet.</td>
        </tr>
      </ng-template>
    </p-table>

            </div>
          </td>
        </tr>
      </ng-template>




    </p-table>

我的ts。文件

显示数据（）{

this.MUnitService.getData().subscribe(
  (data: any) => {

    if (data) {
      this.mUnit = data

      this.cols = [
        { field: 'id', header: 'ID' },
        { field: 'mUnitName', header: 'Name' },
      ];
    }

  }
);

showData 在 ngOnInit() 中调用

4

0 回答 0