时间戳

首页 > 解决方案 > 如何使用平均堆栈在前端实现 findbyid

node.js - 如何使用平均堆栈在前端实现 findbyid

问题描述

我的 route.js

router.get('/:id',(req,res,next)=>{
  University.findById(req.params.id, function (err, universities){
     if(err)
     {
       res.json(err);
     }
     else{
       res.json(universities);
     }
  });
});

这个后端进程工作正常。但我不知道如何在角度前端实现。

大学服务.ts

getSingleuniversities(id)
  {
    return this.http.get('http://localhost:3000/api/' + id).map(res => res.json());
  }

我的 singleuniversity.component.ts

import { Component, OnInit } from '@angular/core';
import {UniversityService} from '../university.service';
import {University} from '../university';

@Component({
  selector: 'app-singleuniversity',
  templateUrl: './singleuniversity.component.html',
  styleUrls: ['./singleuniversity.component.css']
})
export class SingleuniversityComponent implements OnInit {
  universities: University[];

  constructor(private universityService:UniversityService) { }

  ngOnInit() {}
  getSingleuniversities(id:any){
  this.universityService. getSingleuniversities(id)
        .subscribe( universities => 
        this.universities = universities);
      }
}

singleuniversity.component.html

<li>{{university.universityname}}</li>

在 singleuniversity.component.html 中，我收到错误消息，

SingleuniversityComponent.html:1 ERROR TypeError: Cannot read property 'universityname' of undefined
    at Object.eval [as updateRenderer] (SingleuniversityComponent.html:1)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:10872)
    at checkAndUpdateView (core.js:10248)
    at callViewAction (core.js:10484)
    at execComponentViewsAction (core.js:10426)
    at checkAndUpdateView (core.js:10249)
    at callViewAction (core.js:10484)
    at execEmbeddedViewsAction (core.js:10447)
    at checkAndUpdateView (core.js:10244)
    at callViewAction (core.js:10484)

如何解决这个问题。我不知道我在哪里做错了请帮助我，如果有人知道。

标签： node.jsangularmongodb

解决方案

如果我没记错的话，你的服务应该返回一个 Observable 并且应该更像这样：

getSingleuniversities(id): Observable<University[]>{
    return this.http.get<University[]>('http://localhost:3000/api/' + id);
}

然后应该像这样调用该方法：

this.universityService.getSingleuniversities(id).subscribe( 
 (universities: University[]) => this.universities = universities,
 (err: any) => console.log(err));
}

您的列表项应显示在这样的循环中：

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

这样，列表在等待请求响应时根本不显示任何项目，并且应该不会抛出未定义的错误。

推荐阅读