Question

我正试图从这个网站https://api.chucknorris.io/（随机笑话）获取JSON格式的数据，但是我收到一个错误：ERROR错误：找不到类型'的不同支持对象'[object Object]'宾语'。 NgFor仅支持绑定到诸如Arrays之类的Iterables。并且“DebugContext_ {view：Object，nodeIndex：11，nodeDef：Object，elDef：Object，elView：Object}”

这是routing.ts

#include <stdlib.h>
#include <string.h>

void setup() {
Serial.begin(9600);
}

char hexColor[] = "#FFFFFF";
void HEXtoRGB();


void HEXtoRGB() {
hexColor[6] = "3";

char red[5] = {0};
char green[5] = {0};
char blue[5] = {0};

red[0] = green[0] = blue[0] = '0';
red[1] = green[1] = blue[1] = 'X';

red[2] = hexColor[1];
red[3] = hexColor[2];

green[2] = hexColor[3];
green[3] = hexColor[4];

blue[2] = hexColor[5];
blue[3] = hexColor[6];

long r = strtol(red, NULL, 16);
long g = strtol(green, NULL, 16);
long b = strtol(blue, NULL, 16);

Serial.println(r);
Serial.println(g);
Serial.println(b);
Serial.println(hexColor);
}

这是我试图将数据输入

的组件

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());
    }
}

Answer 1

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

所以你应该完全删除*ngFor，只需显示值：

{{jokes?.value}}

此处不需要任何其他内容:)请注意此处的安全导航操作符，它可以保护属性路径中的null和undefined值。准备好在异步世界中使用它;）

以下是有关安全导航操作员的更多信息，来自 official docs 。

Answer 2

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

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

Answer 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()));
}

并使用promise

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

Answer 4

你可以检查它是否是一个数组，然后转到ngFor或将笑话转换为数组，比如让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>

Answer 5

可能jokes不是数组。

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

Angular 2 http - 从API获取数据

5 个答案: