javascript - 为什么Angular将成功的http post请求的结果显示为“未定义”
问题描述
我正在 Windows10 环境中开发 MEAN 堆栈应用程序,使用 Mongoose (v4.4.5) 连接到 MongoDB。我的代码中的一个 http post 请求成功执行并写入 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 函数的 Angular 服务代码:
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 请求的 Express 代码:
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 服务代码中)返回的结果,并分配给 Angular 组件中的“响应”。但这不是它的工作方式。
解决方案
R. Richards 在评论中发布的链接为我的问题提供了完美的解释。我修改了我的角度组件代码如下(基本上,通过将 console.log 放在订阅部分中)并且它按预期工作。不过,如果您有类似的问题,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);
}
)
}
推荐阅读
- python - 从两个可变长度的字符串数组返回相似度矩阵(scipy 选项?)
- r - 在圆形图上添加圆形轴
- sql - SQL Server:在递增 id 的同时一一更新多行
- java - 预期 BEGIN_ARRAY 但为 STRING Gson、java、android
- r - 以不同列为条件的选定列的行平均值
- java - 在二维数组中搜索为 O(n) 且未排序的行
- r - 在 ggplot 上绘制 shapefile
- windows - 如何在 Windows 上将 tensorflow 文件转换为 tensorflow lite
- c# - HtmlAgilityPack 搜索 url 链接
- android - flutter const构造函数错误