Blog Submit功能将日志保存到数据库，但不会在angular组件中显示日志

Question

我正在尝试用angular和MongoDB创建一个博客。当我提交博客时，它会保存在数据库中（使用postman进行检查）。我在输入标记和ckeditor中输入的数据也会出现在测试mat-card组件中。但当我尝试提交博客时，它不会显示在blog-page组件中。blog存储在数据库中。我的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;
  }
}

我的博客-添加组件.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>

控制台或浏览器中没有错误。博客只是不提交，并给出错误消息，我编程到它。我一直没能弄清楚这个问题。我已经测试了我在输入和ckeditor中输入的数据是否出现在mat-card模块中，并且它工作良好。谁能告诉我我在这里做错了什么。谢谢！！！

Answer 1

由于您正在调用的端点没有返回.success属性，因此无法使用该属性来确定调用是否成功。

答复中是否有其他数据表明它是否成功？

如果不是，也许您可以假设一个非错误响应是成功的，并在错误处理程序中捕获错误：

  onBlogSubmit() {
    const post = {
      postTitle: this.postTitle,
      postAuthor: this.postAuthor,
      postContent: this.postContent,
      postImgUrl: this.postImgUrl
    }

    this.postService.addPost(post).subscribe(
        data => {
            this.postService.getPosts();
            this.flashMessage.show('Blog Submitted Successfully', {cssClass: 'alert-success', timeout: 3000});
            this.router.navigate(['/blog-page']);
        },
        error => {
            this.flashMessage.show('Something Went Wrong', {cssClass: 'alert-danger', timeout: 3000});
        }
    );
  }