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

Question

我想使用primeNg p 表来显示对象而不是数组的一些属性，同时保持主要样式。

这样，正文根本不会显示，而标题会显示。我不想仅仅为了满足 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

您可以将对象的属性绑定为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>