Angular：找不到支持对象'[object Object]'的区别

Question

我正在按照这篇教程进行学习。在从api.github获取用户列表的过程中，出现了错误：

无法找到支持 '[object Object]' 对象的差异

我认为这与...有关。

 <ul>
 <li *ngFor = "#user of users">
 {{user | json}}
 </li>
 </ul>

我的代码之前没有任何错误，但我不确定数据是否来自get请求，只是点击没有出现任何错误，以下是我的代码：

@Component({
selector: 'router',
pipes : [],

template: `
<div>
<form [ngFormModel] = "searchform">
      <input type = 'text' [ngFormControl]= 'input1'/>
</form>
     <button (click) = "getusers()">Submit</button>
</div>
<div>
<ul>
    <li *ngFor = "#user of users">
    {{user | json}}
    </li>
</ul>
</div>
<router-outlet></router-outlet>
`,
directives: [FORM_DIRECTIVES]
})
export class router {
searchform: ControlGroup;
users: Array<Object>[];
input1: AbstractControl;

constructor(public http: Http, fb: FormBuilder) {
    this.searchform = fb.group({
        'input1': ['']
    })
    this.input1 = this.searchform.controls['input1']
}
getusers() {
    this.http.get(`https://api.github.com/
search/users?q=${this.input1.value}`)
        .map(response => response.json())
        .subscribe(
        data => this.users = data,
        error => console.log(error)
        )
}
}
bootstrap(router, [HTTP_PROVIDERS])

- blackHawk

Answer 1

我认为你在响应负载中收到的对象不是一个数组。也许你想要迭代的数组包含在一个属性中。你应该检查收到数据的结构...

你可以尝试类似这样的方法：

getusers() {
  this.http.get(`https://api.github.com/search/users?q=${this.input1.value}`)
    .map(response => response.json().items) // <------
    .subscribe(
      data => this.users = data,
      error => console.log(error)
    );
}

编辑

根据 Github 文档 (developer.github.com/v3/search/#search-users) ，响应的格式为：

{
  "total_count": 12,
  "incomplete_results": false,
  "items": [
    {
      "login": "mojombo",
      "id": 1,
      (...)
      "type": "User",
      "score": 105.47857
    }
  ]
}

所以用户列表包含在items字段中，您应该使用它：

getusers() {
  this.http.get(`https://api.github.com/search/users?q=${this.input1.value}`)
    .map(response => response.json().items) // <------
    .subscribe(
      data => this.users = data,
      error => console.log(error)
    );
}

- Thierry Templier

---

通过这样做，错误没有显示，也没有用户显示，console.log为空。 - blackHawk

你应该使用 items。请参考此文档：https://developer.github.com/v3/search/#search-users 以了解响应有效载荷的格式。这对应于响应有效载荷中的用户数组... 我已更新我的答案。 - Thierry Templier

对我来说，出现错误是因为我有一个模板变量（例如 <div #users>）与我正在为 ngFor 设置数据的变量同名。因此，Angular 用模板变量覆盖了我的变量。facepalm - Isaac Lyman

Answer 2

缺少输入属性周围的方括号可能会导致此错误。 例如：

Component Foo {
    @Input()
    bars: BarType[];
}

正确：

<app-foo [bars]="smth"></app-foo>

不正确（引发错误）：

<app-foo bars="smth"></app-foo>

- mp31415

---

因为这个问题我浪费了一个小时！- 谢谢！ - James Poulose

一个特殊情况：在运行我的应用程序的一些karma测试时，当直接在primeng组件上设置模板样式时，我遇到了这个错误。将样式放在组件周围的<span>中解决了它。当运行应用程序本身时，错误根本没有显示。 - user11883568

Answer 3

我在我的代码中遇到了这个错误，因为我没有运行 JSON.parse(result)。

所以我的 result 是一个字符串而不是一个对象数组。

例如，我得到了：

"[{},{}]" 

改为：

[{},{}]

---

import { Storage } from '@ionic/storage';
...
private static readonly SERVER = 'server';
...
getStorage(): Promise {
  return this.storage.get(LoginService.SERVER);
}
...
this.getStorage()
  .then((value) => {
     let servers: Server[] = JSON.parse(value) as Server[];
                   }
  );

- JGFMK

Answer 4

这个荒谬的错误信息只是意味着存在一个绑定到不存在的数组上。

<option
  *ngFor="let option of setting.options"
  [value]="option"
  >{{ option }}
</option>

在上面的例子中，setting.options 的值是未定义的。要修复，请按F12并打开开发者窗口。当get请求返回数据时，查找值是否包含数据。

如果存在数据，则确保绑定名称正确。

//was the property name correct? 
setting.properNamedOptions

如果数据存在，它是一个数组吗？

如果数据不存在，则需在后端进行修复。

- JWP

---

解决了我的问题，无法循环遍历 WordPress 标签 ID 数据，这些数据的形式为 [...{"tags": [2,3,4],}...]。 - aleksejjj

Answer 5

有一件事情让我陷入困境多次，那就是页面上有另一个同名变量。

例如，在下面的示例中，NgFor 的数据在变量requests中。但是，还有一个用于 if-else 的#requests变量。

<ng-template #requests>
  <div class="pending-requests">
    <div class="request-list" *ngFor="let request of requests">
      <span>{{ request.clientName }}</span>
    </div>
  </div>
</ng-template>

- Kildareflare

---

那似乎是这个错误相当常见的原因，它刚刚把我咬了一口。谢谢！ - ckapilla

你刚刚帮我节省了可能需要数小时的时间，感谢你！ - Todd

Answer 6

如果在HTML中返回的是可观察对象，只需添加async管道即可。

    observable | async

- Victor

Answer 7

解释： 您可以在数组上使用*ngFor。您已将用户声明为数组。但是，从Get返回的响应会返回一个对象。您无法在对象上使用ngFor。您应该有一个数组来处理它。您可以显式地将对象转换为数组，这将解决问题。 data to [data]

解决方案

getusers() {
    this.http.get(`https://api.github.com/
search/users?q=${this.input1.value}`)
        .map(response => response.json())
        .subscribe(
        data => this.users = [data], //Cast your object to array. that will do it.
        error => console.log(error)
        )

- Sai Vaibhav Medavarapu

Answer 8

如果您没有一个数组，但是您正在尝试使用可观察对象来模拟数组，即使它是对象流，这也无法在本地工作。我将在下面展示如何解决此问题。

如果您正在尝试使用源类型为BehaviorSubject的可观察对象，请将其更改为ReplaySubject，然后在组件中像这样订阅它：

组件

this.messages$ = this.chatService.messages$.pipe(scan((acc, val) => [...acc, val], []));

HTML

<div class="message-list" *ngFor="let item of messages$ | async">

- Post Impatica