Question

我正在Windows10环境下开发MEAN堆栈应用程序，使用Mongoose（v4.4.5）连接到MongoDB。我的代码中的http发布请求之一成功执行并写入MongoDB。但是从发布请求返回的响应在角度一侧（在浏览器控制台中）显示为“未定义”。但是，这并非始终都会发生。有时，响应实际上可以准确显示出写入MongoDB的内容（这是我一直希望看到的内容）。代码如下所示：

角度组件代码：

import { Component, OnInit, ViewChildren, Renderer2 } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Validators } from '@angular/forms';
import { contactUsInterface } from '../../models/contact-us';
import { HttpClient } from '@angular/common/http';
import { ContactUsService } from '../../services/contact-us.service';
import { ErrorMessageService } from '../../services/error-message.service';
import { Observable } from 'rxjs';

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

export class ContactUsComponent implements OnInit {
  contactUsForm = new FormGroup({
    subject: new FormControl(''),
    message: new FormControl('', Validators.required),
    senderEmail: new FormControl('', [Validators.required, Validators.email]),
  });
  messageFromUser: contactUsInterface;
  response: any;
  successMessage = "Message successfully sent";
  displayMessage = this.successMessage;
  isVisible = "invisible"; //used for successMessage after on submitting form
  submitted = false;
  invalidControlArray = [];

  @ViewChildren("formControl") varInputBoxes;

  constructor(private renderer: Renderer2,
              private contactUsService: ContactUsService,
              private errorMessageService: ErrorMessageService) {}

  ngOnInit() {}

  onSubmit(){
    this.submitted = true;
    if(this.contactUsForm.valid){
      this.messageFromUser = {
        subject: this.contactUsForm.value['subject'],
        message: this.contactUsForm.value['message'],
        senderEmail: this.contactUsForm.value['senderEmail'],
      };
      this.saveMessage();
    }
  };

      saveMessage(){
        this.contactUsService.addMessage(this.messageFromUser)
        .subscribe((data: contactUsInterface) => {this.response = {...data},
                    error => this.displayMessage = this.errorMessageService.convertErrorToMessage(error, this.successMessage)});
//This is where the problem occurs.  "this.resopnse" below shows "undefined"
                    console.log('Response: ', this.response);
     };

  get message() { return this.contactUsForm.get('message'); }
  get senderEmail() { return this.contactUsForm.get('senderEmail'); }
}

具有上面由saveMessage（）调用的addMessage函数的角度服务代码：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map, tap, retry } from 'rxjs/operators';
import { contactUsInterface } from '../models/contact-us';

@Injectable({
  providedIn: 'root'
})

export class ContactUsService {
  private url = '/api/contactus';
  private result: any;
  message: string;

addMessage(messageFromUser: contactUsInterface): Observable<contactUsInterface> {
  return this.http.post<contactUsInterface>(this.url, messageFromUser)
  .pipe(retry(0));
};

constructor(private http: HttpClient) { }
};

侦听http请求的快速代码：

var express = require('express');
var router = express.Router();
var contactUsMessage = require('../models/contact_us_message');

  router.route('/')
    .get(function(req,res,next){
      res.send(req)
    })
    .post(function(req,res,next){
      contactUsMessage.create(
        req.body, function(err,result){
          if (err) {
            next(err);
          } else {
            res.send(result);
          }
        }
    )
  })

module.exports = router;

我希望当快速代码写入MongoDB（此部分有效）并返回“结果”时，该结果就是addMessage（在Angular服务代码中）返回的结果，并在其中分配给“响应”角组件。但这不是它的工作方式。

Answer 1

R。Richards在评论中发布的链接为我的问题提供了完美的解释。我修改了我的角度组件代码，如下所示（基本上是通过将console.log放在subscribe节中），并且按预期工作。不过，如果您遇到类似的问题，则必须阅读R. Richards提供的链接中选择的答案。

saveMessage(){
        this.contactUsService.addMessage(this.messageFromUser)
        .subscribe((data: contactUsInterface) => {this.response = {...data},
                    error => this.displayMessage = this.errorMessageService.convertErrorToMessage(error, this.successMessage);
                    console.log('Response: ', this.response);
     }
   )
 }

为什么Angular将成功的http发布请求显示为“未定义”

1 个答案: