62

我正在关注本教程。在从 api.github 获取用户列表的路上我得到错误：

找不到不同的支持对象“[对象对象]”

我认为它与

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

在我的代码中，因为之前没有任何错误，并且我不确定数据是否来自获取请求，只需单击没有给出任何错误，这是我的代码到目前为止

@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])
4

8 回答 8

54

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

你可以尝试这样的事情：

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)
    );
}
于 2016-02-26T19:57:37.443 回答
14

我在代码中收到此错误，因为我没有运行JSON.parse(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[];
                   }
  );
于 2017-08-11T11:23:08.803 回答
13

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

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

正确的：

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

不正确（触发错误）：

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

于 2018-11-05T19:23:21.120 回答
7

不止一次引起我注意的是页面上有另一个同名的变量。

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

<ng-template #requests>
  <div class="pending-requests">
    <div class="request-list" *ngFor="let request of requests">
      <span>{{ request.clientName }}</span>
    </div>
  </div>
</ng-template>
于 2019-05-19T05:48:11.300 回答
6

这个荒谬的错误消息仅仅意味着绑定到一个不存在的数组。

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

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

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

//was the property name correct? 
setting.properNamedOptions

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

如果数据不存在，则在后端修复它。

于 2020-04-08T15:55:25.370 回答
1

如果这是在 HTML 中返回的 Observable，只需添加异步管道

    可观察的 | 异步
于 2020-04-20T00:27:32.930 回答
0

说明： 您可以在数组上使用 *ngFor。您将用户声明为数组。但是，来自 Get 的响应会返回一个对象。您不能对对象进行 ngFor。你应该有一个数组。您可以将对象显式转换为数组，这将解决问题。 数据到 [数据]

解决方案

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)
        )
于 2020-03-19T22:59:06.210 回答
0

如果您没有数组，但您尝试像数组一样使用您的 observable，即使它是一个对象流，这将无法在本机工作。我在下面展示了如何解决这个问题。

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

零件

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

html

<div class="message-list" *ngFor="let item of messages$ | async">
于 2020-05-05T15:38:50.500 回答