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

【问题标题】：display data from json object on HTML in angular 5以角度 5 在 HTML 上显示来自 json 对象的数据
【发布时间】：2018-10-08 21:10:36
【问题描述】：

你好，我想显示我使用后端 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)




  });
}

这让我在控制台返回了我需要的每个 aribute 事件但是当我改变这个时

console.log(event)

为此，我可以单独获取每个属性，然后将它们放入 html 中

console.log(event.eventname)

我没有定义

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

【问题讨论】：

您正在以“密钥”名称console.log(event.event.eventname) 发送所有内容。这可能应该向您表明不要发送这样的响应，而是简单地返回对象。即res.json(event)，而不是你所拥有的。
另外，您使用的是旧的Http Module 吗？你应该看看使用4.3中引入的HttpClient Module

标签： html json node.js angular mongodb

【解决方案1】：

首先你不必调用 .json() witn angular5

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

你也需要访问

console.log(event.event.eventname);

【讨论】：

【解决方案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 以Ievent 类型返回response 当我们使用http.get<Ievent>(...) 时，它返回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}`);
           }
          }

在您的组件中订阅 Observable<Ievent> 以获取 Ievent 实例

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

【讨论】：