Question

我想使用primeNg p-table来显示对象的某些属性，而不是数组，同时保持原始样式。

与此同时，标题完全不显示正文。我宁愿不必为了满足primeng而将单个对象放入数组中。

  <p-table [responsive]="true">
    <ng-template pTemplate="header">
      <tr>
        <th>
          Lot Start Date
        </th>
        <th>
          Expiration Date
        </th>
        <th>
          Quantity
        </th>
      </tr>
    </ng-template>
    <tr>
      <td>10/12/19</td>
      <td>12/12/19</td>
      <td>50</td>
    </tr>
  </p-table>

Answer 1

您可以像this那样将对象的属性绑定到td

<p-table #table [value]="[{}]">
    <ng-template pTemplate="header">
        <tr>
            <th>
                Lot Start Date
            </th>
            <th>
                Expiration Date
            </th>
            <th>
                Quantity
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData>
        <tr>
            <td>10/12/19</td>
            <td>12/12/19</td>
            <td>50</td>
        </tr>
    </ng-template>
</p-table>

或将对象添加到数组中

ts

data: any[];

  constructor() {
    this.data = [
      {
        lot_start_date: '10/12/19',
        expiration_date: '12/12/19',
        quantity: 50
      }
    ];
  }

html

<p-table #table [value]="data">
    <ng-template pTemplate="header">
        <tr>
            <th>
                Lot Start Date
            </th>
            <th>
                Expiration Date
            </th>
            <th>
                Quantity
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData>
        <tr>
            <td>{{ rowData.lot_start_date }}</td>
            <td>{{ rowData.expiration_date }}</td>
            <td>{{ rowData.quantity }}</td>
        </tr>
    </ng-template>
</p-table>

如何在没有数组对象的情况下使用PrimeNg p表？

1 个答案: