如何将 JSON 对象发布到服务器？

Question

我找不到解决问题的方法，但请随时为我提供一些可以提供帮助的链接。这是完整的sign-up.component.ts 文件。

我目前正在使用 Angular 5 和 Mongo DB，但对使用它们都非常陌生。我试图在sendDataToServer 函数中发布一个名为survey 的JSON 对象。到我的 Mongo DB，但收到一条错误消息，指出 Cannot read property 'post' of undefined at Array.SignUpComponent.sendDataToServer。有人告诉我应该使用 Observables 而不是 Promise，但我不知道如何实现它并且对想法持开放态度。

import { Component, OnInit } from '@angular/core';
import { Model, SurveyNG, JsonObject } from 'survey-angular';
import { HttpClient } from '@angular/common/http';
const surveyJSON = { ... } // the JSON object

export class SignUpComponent implements OnInit {

constructor(private http: HttpClient) {}

ngOnInit() {
    const survey = new Model(surveyJSON);
    /*also here, call with this*/
    survey.onComplete.add(this.sendDataToServer);
    SurveyNG.render('surveyElement', { model: survey });
}

    sendDataToServer(survey){
        alert('The results are:' + JSON.stringify(survey.data));
        this.http.post('DATABASE_URL_OMITTED',
        JSON.stringify(survey.data))
        .subscribe(
        (val) => {
          console.log('POST call successful value returned in body',
            val);
        },
        response => {
          console.log('POST call in error', response);
        },
        () => {
          console.log('The POST observable is now completed.');
        });
    }
}

请帮我弄清楚如何将 JSON 对象发布到数据库。

Answer 1

您的 sendDataToServer 函数是在您注入 http 服务的 Component 类之外定义的，这就是为什么在该函数中引用 this.http 不起作用的原因。该函数需要在您的类定义中。

@Component({
    selector: 'app-sign-up',
    templateUrl: './sign-up.component.html',
    styleUrls: ['./sign-up.component.css']
})

export class SignUpComponent implements OnInit {

    constructor(private http: HttpClient) {}

    ngOnInit() {
        const survey = new Model(surveyJSON);
        /*also here, call with this*/
        survey.onComplete.add(this.sendDataToServer);
        SurveyNG.render('surveyElement', { model: survey });
    }
    //using arrow method notation makes the `this` keyword behave better
    /*function*/ sendDataToServer=(survey)=>{
        alert('The results are:' + JSON.stringify(survey.data));
        this.http.post('DATABASE_URL_OMITTED',
        JSON.stringify(survey.data))
        .subscribe(
        (val) => {
          console.log('POST call successful value returned in body',
            val);
        },
        response => {
          console.log('POST call in error', response);
        },
        () => {
          console.log('The POST observable is now completed.');
        });
    }

}