创建的新记录仅在页面重新加载后显示

Question

我有一个模式窗口与一个表单来创建新的记录。它的工作原理应该是这样的:单击create modal按钮后，窗口应该立即关闭，一个新创建的记录将出现在表中，并且右侧应该会出现一条消息，表明该记录已成功创建。但目前唯一能正常工作的就是关闭模式窗口，以查看需要刷新页面的新记录，并且根本不会显示有关已创建记录的消息。

如何解决这个问题？

import { Component, OnInit, Input, ViewContainerRef, TemplateRef } from '@angular/core';
import { DialogRef, ModalComponent } from 'angular2-modal';
import { Post } from '../../../../../models/post.model';
import { PostService} from '../../../../../services/post/post.service';
import { BSModalContext } from 'angular2-modal/plugins/bootstrap';
import { ToastsManager } from "ng2-toastr";
import { Angular2TokenService } from "angular2-token";
import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'app-add-post',
  templateUrl: './add-post.component.html',
  styleUrls: ['./add-post.component.css'],
  providers: [PostService]
})

export class AddPostComponent  implements OnInit, ModalComponent<any> {

  post = new Post;
  posts: Array<Post>;

  constructor(
    public dialog: DialogRef<any>,
    public authTokenService: Angular2TokenService, 
    private servPost: Post,
    public toastManager: ToastsManager,
    vcr: ViewContainerRef
  ) { 
    toastManager.setRootViewContainerRef(vcr);
  }

  ngOnInit() {
  }



savePost() {
  this.servPost.createPost(this.post).subscribe
    (success => {
        this.toastManager.success('Data successfully created!', 'Done');
        this.servPost.getPosts().subscribe(posts => {
          console.log(posts);
          this.posts = posts;
        });


    }, error => {
      this.toastManager.error(getErrorTextFromJSON(error.json()), 'Error');
    });

    this.dialog.close(null); 

 }

}

在创建一条新记录后，С会以某种方式添加页面刷新选项吗？至少，用户不需要自己更新页面来显示新记录。

Answer 1

如果createPost返回新创建的实体，那么您可以：

savePost() {
  this.servPost.createPost(this.post).subscribe(
     data => {

        this.toastManager.success('Data successfully created!', 'Done');

        // check returned data from rest service
        console.log(data);

        // add the returned data from rest service into posts array
        this.posts.push( data );

        this.dialog.close(null);

     }, 
     error => {
        this.toastManager.error(getErrorTextFromJSON(error.json()), 'Error');
     }
  );

}