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

Posted 2023-03-05

【中文标题】以角度 5 在 HTML 上显示来自 json 对象的数据

【英文标题】：display data from json object on HTML in angular 5

【发布时间】：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

【参考方案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));