如何在Angular5的HTML模板中展示含users和tickers的对象？

我来帮你搞定这个ngFor的报错问题～首先得明确：Angular的*ngFor只能直接遍历可迭代对象（比如数组、Map这类），而你那个包含users和tickers属性的普通JS对象并不是可迭代的，直接用*ngFor遍历它肯定会报错。下面根据不同的展示需求给你两种常用的解决方案：

方案一：分块展示每个属性的数组内容 #

如果你的需求是像截图那样（先显示users的标题，再列所有用户；接着显示tickers标题，再列所有代码），可以先在组件里把对象转换成键值对数组，再用两层ngFor遍历：

1. 在组件类里处理数据 #

添加一个getter方法，把原对象转换成包含属性名和对应数组的结构：

// 假设你的原对象叫data
data = {
  users: ['Alice', 'Bob', 'Charlie'],
  tickers: ['AAPL', 'GOOG', 'MSFT']
};

// 转换为键值对数组
get dataEntries(): Array<{key: string, values: any[]}> {
  return Object.entries(this.data).map(([key, values]) => ({ key, values }));
}

2. 在HTML模板中遍历 #

<div class="data-block" *ngFor="let entry of dataEntries">
  <h4>{{ entry.key }}</h4>
  <ul>
    <li *ngFor="let item of entry.values">{{ item }}</li>
  </ul>
</div>

这样渲染出来的效果就是先展示users列表，再展示tickers列表，完全符合分块展示的需求。

方案二：按索引对应展示（用户和代码一一配对） #

如果你的需求是把users[i]和tickers[i]放在同一行展示（比如表格形式），可以利用ngFor的索引变量来实现：

HTML模板代码 #

<table border="1">
  <thead>
    <tr>
      <th>User</th>
      <th>Ticker</th>
    </tr>
  </thead>
  <tbody>
    <!-- 用_占位，只取索引i -->
    <tr *ngFor="let _ of data.users; let i = index">
      <td>{{ data.users[i] }}</td>
      <td>{{ data.tickers[i] }}</td>
    </tr>
  </tbody>
</table>

注意：这种方式需要确保users和tickers两个数组的长度一致，避免出现索引越界的问题。

额外方案：自定义管道（适合多组件复用场景） #

如果你的项目里多个地方都需要遍历普通对象，可以自定义一个管道来转换对象为可迭代的键值对数组：

1. 创建管道文件 #

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

@Pipe({ name: 'objectEntries' })
export class ObjectEntriesPipe implements PipeTransform {
  transform(value: any): Array<[string, any]> {
    // 处理null/undefined的情况，避免报错
    return value ? Object.entries(value) : [];
  }
}

2. 在模块中声明管道 #

在你的AppModule或者对应功能模块里添加这个管道的声明：

import { ObjectEntriesPipe } from './object-entries.pipe';

@NgModule({
  declarations: [
    // ...其他组件/指令
    ObjectEntriesPipe
  ]
})
export class AppModule { }

3. 在模板中使用管道 #

<div *ngFor="let [key, values] of data | objectEntries">
  <h4>{{ key }}</h4>
  <ul>
    <li *ngFor="let item of values">{{ item }}</li>
  </ul>
</div>

这样就不用在每个组件里写转换逻辑，直接用管道处理对象即可。

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