Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed - No answers to my situation

Question

我现在正在 Angular 上构建我的前端，对于我来说，我看不出是什么导致了这个错误。我正在使用 Node.js 作为我的后端。下面是我的代码。

country.ts

export class Country {
  id?: string;
  name?: string;
  icon?: string;
  imageFlag?: string;
}

countries.services.ts

export class CountriesService {
  constructor(private http: HttpClient) {}

  getCountries(): Observable<Country[]> {
    return this.http.get<Country[]>('http://127.0.0.1:3300/api/v1/countries/');
  }
}

国家-list.component.ts

export class CountriesListComponent implements OnInit {
  countries: Country[] = [];

  constructor(private countriesService: CountriesService) {}

  ngOnInit(): void {
    this.countriesService.getCountries().subscribe((amazwe) => {
      this.countries = amazwe;
      console.log(amazwe);
    });
  }
}

我在 console.log(amazwe) 上的控制台描述如下

{
    "status": "success",
    "results": 7,
    "data": {
        "data": [
            {
                "_id": "61c4827a69a96679469adac2",
                "name": "Botswana",
                "icon": "Safari iCON",
                "imageFlag": "Botswana Flag",
                "__v": 0,
                "id": "61c4827a69a96679469adac2"
            },
            {
                "_id": "61c482ab69a96679469adac4",
                "name": "South Africa",
                "icon": "Safari iCON",
                "imageFlag": "South Africa Flag",
                "__v": 0,
                "id": "61c482ab69a96679469adac4"
            },
            {
                "_id": "61c482c369a96679469adac6",
                "name": "Namibia",
                "icon": "Safari iCON",
                "imageFlag": "Namibia Flag",
                "__v": 0,
                "id": "61c482c369a96679469adac6"
            },
            {
                "_id": "61c482f569a96679469adac8",
                "name": "Mozambique",
                "icon": "Safari iCON",
                "imageFlag": "Mozambique Flag",
                "__v": 0,
                "id": "61c482f569a96679469adac8"
            },
            {
                "_id": "61c4831769a96679469adaca",
                "name": "Zimbabwe",
                "icon": "Safari iCON",
                "imageFlag": "Zimbabwe Flag",
                "__v": 0,
                "id": "61c4831769a96679469adaca"
            },
            {
                "_id": "61c4832f69a96679469adacc",
                "name": "Zambia",
                "icon": "Safari iCON",
                "imageFlag": "Zambia Flag",
                "__v": 0,
                "id": "61c4832f69a96679469adacc"
            },
            {
                "_id": "61c4836369a96679469adace",
                "name": "Tanzania",
                "icon": "Safari iCON",
                "imageFlag": "Tanzania Flag",
                "__v": 0,
                "id": "61c4836369a96679469adace"
            }
        ]
    }
}

Answer 1

使用 JSON 格式化程序（例如这个：https://codebeautify.org/jsonviewer）有助于更好地查看数据：

{
  "status": "success",
  "results": 7,
  "data": {
    "data": [
      {
        "_id": "61c4827a69a96679469adac2",
        "name": "Botswana",
        "icon": "Safari iCON",
        "imageFlag": "Botswana Flag",
        "__v": 0,
        "id": "61c4827a69a96679469adac2"
      },
      {
        "_id": "61c482ab69a96679469adac4",
        "name": "South Africa",
        "icon": "Safari iCON",
        "imageFlag": "South Africa Flag",
        "__v": 0,
        "id": "61c482ab69a96679469adac4"
      },
      {
        "_id": "61c482c369a96679469adac6",
        "name": "Namibia",
        "icon": "Safari iCON",
        "imageFlag": "Namibia Flag",
        "__v": 0,
        "id": "61c482c369a96679469adac6"
      },
      {
        "_id": "61c482f569a96679469adac8",
        "name": "Mozambique",
        "icon": "Safari iCON",
        "imageFlag": "Mozambique Flag",
        "__v": 0,
        "id": "61c482f569a96679469adac8"
      },
      {
        "_id": "61c4831769a96679469adaca",
        "name": "Zimbabwe",
        "icon": "Safari iCON",
        "imageFlag": "Zimbabwe Flag",
        "__v": 0,
        "id": "61c4831769a96679469adaca"
      },
      {
        "_id": "61c4832f69a96679469adacc",
        "name": "Zambia",
        "icon": "Safari iCON",
        "imageFlag": "Zambia Flag",
        "__v": 0,
        "id": "61c4832f69a96679469adacc"
      },
      {
        "_id": "61c4836369a96679469adace",
        "name": "Tanzania",
        "icon": "Safari iCON",
        "imageFlag": "Tanzania Flag",
        "__v": 0,
        "id": "61c4836369a96679469adace"
      }
    ]
  }
}

看起来你正在取回你想要的数据，但它只有一个包装器。

this.countries = amazwe.data.data;

...会给你我怀疑你正在寻找的结果，但你必须改变 return 值的类型才能处理这个问题。

Answer 2

您对class/interface的回复数据如下：

export interface ICountryListResponse {
  status: string;
  results: number;
  data: { data: Country[] };
}

修改您的 CountriesService.getCountries() 以期望收到 ICountryListResponse 数据响应，然后将 .pipe(map) 修改为 return 结果为 Observable<Country[]>。

countries.services.ts

import { map } from 'rxjs/operators';

getCountries(): Observable<Country[]> {
  return this.http
    .get<ICountryListResponse>('http://127.0.0.1:3300/api/v1/countries/')
    .pipe(map((response: ICountryListResponse) => response.data.data));
}

Sample Demo on StackBlitz

Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed - No answers to my situation

Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed - No answers to my situation

node.js

angular

angular-httpclient