0

我有一个名为 cols 的 p 表：

TS 文件：

public cols: any[];
    
   public ngOnInit(): void {
    this.cols = [
      { field: 'length', header: 'Length (m)' },
      { field: 'width', header: 'Width (m)' },
      { field: 'height', header: 'Height (m)' },
      { field: 'area', header: 'Area (m2)' },
      { field: 'volume', header: 'Volume (m3)' },
    ];
  }

HTML 文件：

<p-table [value]="cols">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-col>
        <tr>
            <td *ngFor="let col of cols">
                {{col[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

面积和体积分别以平方米和立方米为单位。我应该如何修改面积 (m2)和体积 (m3)以便它们以正确的格式显示m 的 2 和 3 次方？

我已经试过了标签，但它没有帮助：

 this.cols = [
      ....
      { field: 'area', header: 'Area (m<sup>2</sup>)' },
      { field: 'volume', header: 'Volume (m<sup>3</sup>)' },
    ];

编辑：请注意，我的问题不是如何填充结果（数字），而是如何正确显示标题。为了清楚我所说的正确和不正确格式的意思，请参见：

现在，标题中的指数以不正确的格式显示。

4

1 回答 1

1

尝试：

ts

this.cols = [
      ....
      { field: 'area', header: 'Area (m<sup>2</sup>)' },
      { field: 'volume', header: 'Volume (m<sup>3</sup>)' },
];

html

<ng-template pTemplate="body" let-col>
    <tr>
        <ng-container *ngFor="let col of cols">
            <td [innerhtml]="col[col.field]"></td>
        </ng-container>
    </tr>
</ng-template>

相同：https: //stackoverflow.com/a/34424375/8944414 StackBlitz

于 2020-09-27T12:51:40.307 回答