Question

我有一个模式窗体窗口，用于创建新记录。它的工作方式应为：单击创建模式按钮后，窗口应立即关闭，新创建的记录将出现在表中，并且一条消息应出现在该记录已成功创建的右侧。但是目前，唯一有效的方法就是仅关闭模式窗口，才能刷新页面以查看新记录，并且关于已创建记录的消息根本不会显示。

如何解决？

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');
     }
  );

}

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

1 个答案: