Question

我的route.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;

此后端进程正常工作。.

我的university.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());
  }

}

我的universitylist.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。

错误找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到可迭代对象，例如数组

1 个答案: