html - 以 Angular 5 在 HTML 上显示来自 json 对象的数据

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

    }

  });
});
});

这是来自 Angular 服务的代码

// 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)

这样我就可以分别获取每个属性，然后将它们放入 html

console.log(event.eventname)

我未定义

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

Answer 1

首先，您不必使用 angular5 调用 .json()

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

您还需要访问

console.log(event.event.eventname);