Angular动态表格用ngFor遍历对象时无法访问Object类的求助

Angular 组件模板的上下文默认只能访问对应组件类中声明的属性和方法，全局JS内置对象（比如Object、window等）不在模板可访问范围内，所以才会抛出找不到Object属性的报错。

下面给出三种常用实现方案，可根据业务场景选择： #

方案1：直接在组件类暴露Object对象（改动最小） #

只需要在你的PaginationTableComponent组件类中新增一行声明，将全局Object绑定为组件的公共属性即可，原有模板代码不需要任何修改：

// pagination-table.component.ts
import { Component } from '@angular/core';

@Component({
  // 原有组件配置不变
  selector: 'app-pagination-table',
  templateUrl: './pagination-table.component.html'
})
export class PaginationTableComponent {
  // 新增这一行即可
  public readonly Object = Object;

  // 原有其他组件逻辑、tableConfig等属性不变
}

模板代码保持你之前的写法即可正常运行：

<tr *ngFor="let data of tableConfig.data; let i = index">
  <td *ngFor="let propValue of Object.values(data)">{{ propValue }}</td>
</tr>

方案2：封装为纯管道（性能最优，推荐通用组件使用） #

如果你的动态表格是通用公共组件，数据量较大，更推荐封装为纯管道，默认只有当输入数据变化时才会重新计算，性能更高：

1. 首先创建管道文件get-object-values.pipe.ts：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'getObjectValues',
  pure: true // 纯管道为默认值，可以不写
})
export class GetObjectValuesPipe implements PipeTransform {
  transform(value: Record<string, any>): any[] {
    return Object.values(value);
  }
}

2. 将该管道在你组件所属的NgModule的declarations数组中声明，如果你用的是独立组件，直接在组件的imports数组中引入即可。
3. 修改模板代码使用管道：

<tr *ngFor="let data of tableConfig.data; let i = index">
  <td *ngFor="let propValue of data | getObjectValues">{{ propValue }}</td>
</tr>

方案3：封装为组件类方法 #

也可以把取值逻辑封装为组件的公共方法调用：

// pagination-table.component.ts
export class PaginationTableComponent {
  // 原有逻辑不变
  public getPropertyValues(data: Record<string, any>): any[] {
    return Object.values(data);
  }
}

模板中调用该方法：

<tr *ngFor="let data of tableConfig.data; let i = index">
  <td *ngFor="let propValue of getPropertyValues(data)">{{ propValue }}</td>
</tr>

注意：如果组件使用默认的变更检测策略，该方法会在每次变更检测周期重复执行，数据量大时会有性能损耗。

内容的提问来源于stack exchange，提问作者Gabriel Felipe Werner