Angular 2 http - 从 API 获取数据答案

【问题标题】：Angular 2 http - get data from APIAngular 2 http - 从 API 获取数据
【发布时间】：2017-05-25 12:29:45
【问题描述】：

我正在尝试从该站点https://api.chucknorris.io/（随机笑话）获取 JSON 格式的数据，但我收到一个错误：ERROR 错误：找不到类型为“object”的不同支持对象“[object Object]” . NgFor 仅支持绑定到 Iterables，例如 Arrays。以及“DebugContext_{view: Object, nodeIndex: 11, nodeDef: Object, elDef: Object, elView: Object}”

这是routing.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class RandomService {
    constructor(private http: Http) {
        console.log('working');

    }
    getRandomJokes() {
        return this.http.get('https://api.chucknorris.io/jokes/random')
            .map(res => res.json());
    }
}

这是我试图获取数据的组件

<div *ngFor="let joke of jokes">
<h3>{{joke.value}}</h3>
</div>

`,
providers: [RandomService]

})
export class PocetnaComponent  { 
jokes: Joke[];

constructor(private jokesService: RandomService){
this.jokesService.getRandomJokes().subscribe(jokes => {this.jokes = jokes});
}

}
interface Joke{
 id: number;
 value: string;
}

【问题讨论】：

getRandomJokes() 没有返回数组，所以开你的玩笑..

标签： api angular

【解决方案1】：

由于您收到的不是数组，而是一个对象，因此您收到的错误是因为无法迭代对象。您可能需要重新考虑命名，因为我们只处理一个对象，joke 将是一个更合适的名称。但在这里，让我们使用jokes。

所以你应该做的是完全删除 *ngFor 并简单地显示值：

{{jokes?.value}}

不需要其他任何东西 :) 请注意这里的安全导航运算符，它可以保护属性路径中的 null 和未定义值。准备好在异步世界中大量使用它;)

这里是关于安全导航操作员的更多信息，来自 official docs。

【讨论】：

【解决方案2】：

您没有将数组绑定到*ngFor，您必须确保jokes 实际上是一个数组，而不是一个随机的玩笑对象。

如果它是一个对象，你可以通过this.jokes = [jokes]来解决它。

【讨论】：

这是一个很好的解决方案，但为什么还要在数组中设置jokes？为什么不直接删除 *ngFor 并只显示对象的属性？
@AJT_82 我会这样做，但这不是问题所在。因此这不是答案:)
好吧，在我看来，没有任何地方提到它需要是一个数组。我认为我们应该始终引导“更好的方法”，如果有的话。想想代码是否会更复杂、成本更高，并且您知道有更好/更快/更容易（等）的方式，为什么不建议呢？ :) 我会的，如果我足够聪明，可以找到更好的解决方案，我会这样做（很少发生：P）。

【解决方案3】：

您提到的url 仅在对象中提供单个值，因此您无法对其进行迭代。

也许可以像这样拨打多个电话：

getRandomJokes(n = 10){
    return Promise.all(Array(n).fill(0)
            .map(() => this.http.get('https://api.chucknorris.io/jokes/random').toPromise()
                                .then(res => res.json()));
}

并与承诺一起使用

this.jokesService.getRandomJokes().then(jokes => {this.jokes = jokes});

【讨论】：

【解决方案4】：

您可以检查它是否是一个数组，然后使用 ngFor 或将笑话转换为数组，例如 let jokes = [jokes];

<div *ngIf = "jokes.length > 0" ; else check>
    <div *ngFor="let joke of jokes">
        <h3>{{joke.value}}</h3>
    </div>
</div>
<ng-template #check>
    <p>print the value of the object </p>
</ng-template>

【讨论】：

【解决方案5】：

可能是 jokes 不是数组。

 <div *ngIf="Array.isArray(jokes)>
<div *ngFor="let joke of jokes"> 
<h3>{{joke.value}}</h3> 
</div>

【讨论】：