错误找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays

Question

我的路由.js

const express = require('express');
const router = express.Router();
const University = require('../models/university');
var mongo = require('mongodb').MongoClient;
var assert = require('assert');




var url = 'mongodb://localhost:27017/universitylist';

//retrieving data
//router.get('/universities',(req,res,next)=>{
  //  University.find(function(err,universities){
    //    if(err)
      //  {
        //    res.json(err);
        //}
       // res.json(universities);
    //});
//});

router.get('/usa', function(req, res, next) {
  var resultArray = [];
  mongo.connect(url, function(err, db) {
    assert.equal(null, err);
    var cursor = db.db('universitylist').collection('us').find();
    cursor.forEach(function(doc, err) {
      assert.equal(null, err);
      resultArray.push(doc);
    }, function() {
     db.close();
     res.json({universities: resultArray});
    });
  });
});

module.exports= router;

这个后端进程正常工作..

我的大学.service.ts

import { Injectable } from '@angular/core';
import {Http,Headers} from '@angular/http';
import {University} from './university';
import 'rxjs/Rx';


@Injectable({
  providedIn: 'root'
})
export class UniversityService {

  constructor(private http:Http) { }

//retrieving UniversityService
  getUniversities()
  {
    return this.http.get('http://localhost:3000/api/usa').map(res => res.json());
  }

}

我的大学列表.component.ts

import { Component, OnInit } from '@angular/core';
import {UniversityService} from '../university.service';
import {University} from '../university';
@Component({
  selector: 'app-universitylist',
  templateUrl: './universitylist.component.html',
  styleUrls: ['./universitylist.component.css'],
  providers:[UniversityService]
})
export class UniversitylistComponent implements OnInit {
  universities: University[];


  constructor(private universityService:UniversityService) { }

  ngOnInit() {
    this.universityService.getUniversities()
        .subscribe( universities => 
        this.universities = universities);
  }

}

universitylist.component.html

<h1>University list</h1>
<div *ngFor="let university of universities">
  <li>{{university.universityname}}</li>
</div>

如果我运行前端进程，我会在控制台中收到错误，

UniversitylistComponent.html:2 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngOnChanges (vendor.js:3229)
    at checkAndUpdateDirectiveInline (vendor.js:40326)
    at checkAndUpdateNodeInline (vendor.js:41594)
    at checkAndUpdateNode (vendor.js:41556)
    at debugCheckAndUpdateNode (vendor.js:42189)
    at debugCheckDirectivesFn (vendor.js:42149)
    at Object.eval [as updateDirectives] (UniversitylistComponent.html:2)
    at Object.debugUpdateDirectives [as updateDirectives] (vendor.js:42141)
    at checkAndUpdateView (vendor.js:41538)
    at callViewAction (vendor.js:41779)

我该如何解决这个错误，如果有人知道，请帮助我...我不知道我在前端哪里出错了。我已经搜索过，但我找不到任何东西。

Answer 1

你的后端返回一个对象，而不是一个数组：

res.json({universities: resultArray}); // => {universities: [{...}, {...}]}

所以，当你发出 http 请求时，从响应中检索数组：

this.http.get('http://localhost:3000/api/usa').map(res => res.json().universities) // Might need a null check here

旁注：您仍在使用已弃用的HttpModule。你应该切换到HttpClientModule。