【发布时间】：2021-03-28 00:36:11
【问题描述】：
我正在尝试使用 angular 和 mongodb 创建一个博客。当我提交我的博客时，它被保存在数据库中（使用邮递员检查）。我在输入标签和ckeditor中输入的数据在我测试时也会出现在mat-card组件中。但是当我尝试提交博客时，它不会显示在博客页面组件中。博客存储在数据库中。我的 onBlogSubmit() 函数出了点问题，但我不知道它是什么：
这是我尝试过的：
我的 post.service.ts 文件：
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Post } from '../post/post';
import { Observable, throwError } from 'rxjs';
import 'rxjs/add/operator/map';
export interface post {
success: boolean;
post: any;
token: any;
}
@Injectable({
providedIn: 'root'
})
export class PostService {
authToken: any;
post: any;
public baseUri: string = 'http://localhost:3000/blogs';
public headers = new HttpHeaders().set('Content-Type', 'application/json');
constructor(private http: HttpClient) { }
getPosts(): Observable<post> {
this.loadToken();
const head = this.headers.append('Authorization', this.authToken);
return this.http.get<post>(this.baseUri + '/allPosts', { headers: head });
}
getPost(id): Observable<post> {
this.loadToken();
const head = this.headers.append('Authorization', this.authToken);
return this.http.get<post>(this.baseUri + '/singlePost/' + id, { headers: head })
}
addPost(post): Observable<post> {
this.loadToken();
const head = this.headers.append('Authorization', this.authToken);
return this.http.post<post>(this.baseUri + '/newPost', post, { headers: head });
}
updatePost(id, post: post): Observable<any> {
this.loadToken();
const head = this.headers.append('Authorization', this.authToken);
return this.http.put<post>(this.baseUri + '/editPost/' +id , post, { headers: head });
}
deletePost(id): Observable<post> {
this.loadToken();
const head = this.headers.append('Authorization', this.authToken);
return this.http.put<post>(this.baseUri + '/deletePost/' + id, { headers: head });
}
public loadToken() {
const token = localStorage.getItem('id_token');
this.authToken = token;
}
}
我的博客-添加component.ts：
import { Component, OnInit } from '@angular/core';
import { PostService } from '../Services/post.service';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';
@Component({
selector: 'app-blog-add',
templateUrl: './blog-add.component.html',
styleUrls: ['./blog-add.component.scss']
})
export class BlogAddComponent implements OnInit {
postTitle: string;
postAuthor: string;
postContent: string;
postImgUrl: string;
post = {};
constructor(private postService: PostService,
private formBuilder: FormBuilder,
private router: Router,
private flashMessage: FlashMessagesService) {
}
ngOnInit(): void {
}
// THIS IS WHERE THE PROBLEM OCCURS
onBlogSubmit() {
const post = {
postTitle: this.postTitle,
postAuthor: this.postAuthor,
postContent: this.postContent,
postImgUrl: this.postImgUrl
}
this.postService.addPost(post).subscribe(data => {
if(data.success) {
this.postService.getPosts();
this.flashMessage.show('Blog Submitted Successfully', {cssClass: 'alert-success', timeout: 3000});
this.router.navigate(['/blog-page']);
} else {
this.flashMessage.show('Something Went Wrong', {cssClass: 'alert-danger', timeout: 3000});
}
});
}
}
我的博客添加组件 HTML：
<app-header></app-header>
<div class="row" *ngIf="post">
<div class="col-sm-12 form-main">
<form name="postForm" (ngsubmit)="onBlogSubmit()" class="text-center border border-light p-5 shadow-lg">
<input type="text" class="form-control mb-4" placeholder="Name" [(ngModel)]="post.postTitle" name="postTitle">
<input type="text" class="form-control mb-4" placeholder="Username" [(ngModel)]="post.postAuthor" name="postAuthor">
<img ng-src="postImgUrl">
<ckeditor matCkeditor class="form-control mb-8" [(ngModel)]="post.postContent" name="postContent"></ckeditor>
<button mat-raised-button type="submit" class="btn btn-success btn-block get" (click)="onBlogSubmit()">Submit</button>
</form>
</div>
</div>
我想要查看博客数据的博客页面 ts 文件。
import { Component, OnInit } from '@angular/core';
import { PostService } from '../Services/post.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-blog-page',
templateUrl: './blog-page.component.html',
styleUrls: ['./blog-page.component.scss']
})
export class BlogPageComponent implements OnInit {
post: Object;
constructor(private postService: PostService, private router: Router) {}
ngOnInit(): void {
this.postService.getPosts().subscribe(posts => {
this.post = posts.post;
},
err => {
console.log(err);
return false;
});
}
}
我的博客页面组件 HTML：
<app-header></app-header>
<div fxLayout="row wrap" fxLayoutAlign="center">
<mat-card *ngIf="post" class="card">
<mat-card-header>
<mat-card-title class="title">{{post.postTitle}}</mat-card-title>
<mat-card-subtitle class="subtitle">Author: {{post.postAuthor}}</mat-card-subtitle>
<mat-card-subtitle class="subtitle">Content: {{post.postContent}}</mat-card-subtitle>
</mat-card-header>
<mat-card-actions class="multi-button">
<button mat-icon-button><span class="fa fa-share fa-lg"></span></button>
<button mat-icon-button><span class="fa fa-trash fa-lg"></span></button>
<!-- <button mat-icon-button><span class="fa fa-heart fa-lg"></span></button> -->
</mat-card-actions>
</mat-card>
</div>
<app-footer></app-footer>
控制台或浏览器中没有错误。该博客只是不提交并给出了我在其中编写的错误消息。我一直无法弄清楚问题所在。我已经测试了我在 input 和 ckeditor 中输入的数据是否出现在 mat-card 模块中并且工作正常。请有人告诉我我在这里做错了什么。谢谢！！！
【问题讨论】：
-
您的
data回复是什么样的？我会console.log(data)来验证它是否具有.success属性。 -
console.log 显示 _id 和更新的值。它不显示 postTitle、postContent 等。
-
如果您没有
success属性，那么您的条件将始终返回false并将其视为错误：if(data.success) -
我在导出界面中添加了success属性，并在ts中使用了它。没有打字稿错误。那么我该如何解决呢？
-
您的端点是什么样的？听起来它没有检索到正确的东西。
标签： node.js angular mongodb typescript angular-httpclient