Question

你好我想显示我使用后端api（nodejs）从mongodb获得的数据这是事件模型的代码

const mongoose = require('mongoose');
const config = require('../config/database');

// Events Schema
const EventSchema = mongoose.Schema({
  eventname: {
    type: String,
    required: true
  },
  eventstartdate: {
    type: String,
    required: true


  },
  eventenddate: {
    type: String,
    required: true


  },

  eventcategorie: {
    type: String


  },
  eventdescription: {
    type: String


  },
  eventimage: {
    type: String


  }


});
const Event = module.exports = mongoose.model('Event', EventSchema);

这是路由器的代码

    const express = require('express');
    const router = express.Router();
    const passport = require('passport');
    const jwt = require('jsonwebtoken');
    const config = require ('../config/database');
    const User = require('../models/user');
    const Event = require('../models/event');

    //get event by id
router.get('/event/:eventid', (req,res) => {
  Event.findById(req.params.eventid, (err, event) =>{   
  if (err){
    return res.status(500).send({message:err.message});
  }
  if(!event){
    return res.status(400).send({message:'Event not found'});
  }

  res.json({

    event: {
      id: event._id,
      eventname: event.eventname,
      eventstartdate: event.eventstartdate,
      eventenddate: event.eventenddate,
      eventcategorie: event.eventcategorie,
      eventdescription: event.eventdescription,
      eventimage: event.eventimage

    }

  });
});
});

这是角度

中服务的代码

// GET an event by ID
   displayEvent$(id: string) {
    return this.http.get(`http://localhost:3000/users/event/${id}`)
    .map(response => response.json());
  }

然后我创建了一个由按钮触发的简单方法并且我传递了一个事件的id，我知道它在数据库中只是为了测试它

onclickeventpage(){
    this.authService.displayEvent$('5ae0c8e96b40a71cd3b772cc').subscribe(event => {
      console.log(event)




  });
}

这让我在控制台上得到了我需要的每一个事件但是我改变了这个

console.log(event)

这样我就可以获得evey属性，然后我将它们放入html中

console.log(event.eventname)

我得到了未定义的

我只想知道如何获取每个事件的属性，以便我可以在我的html页面中显示它们

Answer 1

首先你不必打电话给 .json（）和angular5

displayEvent$(id: string) {
    return this.http.get(`http://localhost:3000/users/event/${id}`)
    .map(response => response.json());
  }

您还需要访问

console.log(event.event.eventname);

Answer 2

不推荐使用

HttpModule，默认情况下新的HttpClientModule会将响应格式化为JSON，因此我们不再需要使用response.json()解析它：

我只是想知道如何获取每个事件属性以便我可以在我的HTML页面上显示它们

您可以告诉HttpClient响应的类型，使输出更容易，更明显。

可以使用类型参数

来完成响应的类型检查

 export interface Ievent {
  id:string
  eventname: string
  eventstartdate: string
  eventenddate: string
  eventcategorie: string
  eventdescription: string
  eventimage: string

    }

Http返回observable我们可以告诉HttpClient.get返回response作为Ievent类型当我们使用http.get<Ievent>(...)时它会返回{的实例{1}}类型。
在您的服务中

Observable<Ievent>

在您的组件中订阅import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import {Ievent} from './eventModel' @Injectable() export class authService() { constructor(private http:HttpClient){} displayEvent$(id: string)Observable<Ievent> { return this.http.get<Ievent>(`http://localhost:3000/users/event/${id}`); } }以获取Ievent的实例

Observable<Ievent>

以角度5显示来自HTML上的json对象的数据

2 个答案: