Angular 9 找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如数组

Java

# 解决 Angular 9 中 NgFor 报错：“找不到类型为‘object’的不同支持对象”

在使用 Angular 9 中进行开发时，有时候我们会遇到一些令人困扰的错误。其中之一是在使用 *ngFor 指令时，可能会遇到类似于“找不到类型为‘object’的不同支持对象‘[object Object]’”的错误信息。这个错误通常发生在我们尝试使用 *ngFor 对对象进行迭代时，而不是数组。本文将探讨这个问题的原因，并提供解决方案以及一个简单的案例代码。

## 错误的根本原因

在 Angular 9 中，*ngFor 指令是用于迭代集合（Collection）的强大工具。然而，该指令要求我们迭代的对象必须是可迭代的（Iterable），例如数组。当我们尝试将一个对象传递给 *ngFor 而不是数组时，就会触发类似于“找不到类型为‘object’的不同支持对象‘[object Object]’”的错误。

这是因为 *ngFor 只能处理实现了 Iterable 接口的对象，而普通的 JavaScript 对象并没有实现这个接口，因此无法直接在 *ngFor 中使用。

## 解决方案

为了解决这个问题，我们需要确保我们在 *ngFor 中使用的是一个可迭代的对象，而不是普通的 JavaScript 对象。最常见的可迭代对象之一就是数组。因此，我们可以将对象转换为数组，然后再在 *ngFor 中使用。

下面是一个简单的案例代码，演示了如何解决这个问题：

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-example',
  template: <code>
    <div *ngFor="let item of objectToArray(exampleObject)">
      {{ item }}
    </div>
  </code>,
})
export class ExampleComponent {
  exampleObject = { key1: 'value1', key2: 'value2', key3: 'value3' };
  objectToArray(obj: object): any[] {
    return Object.values(obj);
  }
}

在上面的例子中，我们有一个名为 exampleObject 的普通 JavaScript 对象，它包含了一些键值对。为了在 *ngFor 中使用，我们创建了一个名为 objectToArray 的辅助函数，它将对象转换为数组。然后，我们在模板中调用这个函数，将转换后的数组传递给 *ngFor。

##

在使用 Angular 9 进行开发时，出现 *ngFor 错误“找不到类型为‘object’的不同支持对象‘[object Object]’”可能是因为我们尝试在 *ngFor 中使用一个普通的 JavaScript 对象。通过将对象转换为数组，我们可以轻松解决这个问题，并顺利使用 *ngFor 进行迭代操作。在开发过程中，保持对 Angular 错误的敏感性，以便及时发现并解决类似问题，提高开发效率。