Angular中如何不硬编码打印对象的键与值？

嘿，你这个需求完全不用依赖Pipe就能解决，给你分享几个实用的小方案：

方案1：组件内预处理键值对数组 #

这种方法性能更优，因为提前把数据转换成了便于模板遍历的格式，避免在模板中频繁调用方法触发多余的变更检测：

组件代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  originalArray = [{name: 'name1', id: 1},{name: 'name2', id: 2}];
  // 预处理：把每个对象转换成键值对数组，同时处理属性名的首字母大写
  processedItems = this.originalArray.map(item => 
    Object.entries(item).map(([key, value]) => ({
      label: key.charAt(0).toUpperCase() + key.slice(1),
      value: value
    }))
  );
}

模板代码 #

<div *ngFor="let item of processedItems">
  <p *ngFor="let prop of item">{{ prop.label }}: {{ prop.value }}</p>
</div>

方案2：模板中调用组件方法获取键值对 #

如果不想提前预处理，也可以在组件里写一个方法来返回对象的键值对，直接在模板中使用：

组件代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  array = [{name: 'name1', id: 1},{name: 'name2', id: 2}];

  getObjectEntries(item: any): [string, any][] {
    return Object.entries(item);
  }

  formatKey(key: string): string {
    return key.charAt(0).toUpperCase() + key.slice(1);
  }
}

模板代码 #

<div *ngFor="let item of array">
  <p *ngFor="let [key, value] of getObjectEntries(item)">
    {{ formatKey(key) }}: {{ value }}
  </p>
</div>

注意：这种方法在Angular的默认变更检测策略下，每次变更检测都会调用getObjectEntries和formatKey方法，如果你有大量数据，可能会影响性能。如果担心这个，可以把方法改成纯函数，或者切换到OnPush变更检测策略。

方案3：直接获取对象的键（适合属性固定的场景） #

如果你的数组对象属性是固定的（比如只有name和id），也可以直接手动获取键，虽然不够动态，但简单直接：

模板代码 #

<div *ngFor="let item of array">
  <p>{{ 'Name' }}: {{ item.name }}</p>
  <p>{{ 'Id' }}: {{ item.id }}</p>
</div>

当然这个方案灵活性差，适合属性固定不变的情况，不如前两种通用。

内容的提问来源于stack exchange，提问作者codedamn