如何将元素推送到可观察对象并更新 UI

Question

有人可以帮我解决这个问题吗？我开始学习 angular8 中的可观察对象和异步管道。

我正在尝试向我的可观察对象添加一个元素并更新我的 UI。此刻我有这个，它在我的数组的开头和结尾添加了我的元素。我做错了什么？

在我的组件中：

    var comment = new Comment();
    this.postService.addComment(commentdto).subscribe((c) => {
      comment = c;
      this.post.subscribe(x => {
        x.comments.push(comment);
        this.post = of(x);
      });
    });

<div *ngIf="post | async as p">
  <div class="post-container border-bottom border-dark mb-2">
    <h3 class="col-sm-12">{{p.text}}</h3>
    <div class="col-sm-12">
      <img class="img-fluid image-height" src="https://localhost:5003/posts/{{p.imageUrl}}" />
      <div class="row" style="margin-left: 0px; margin-top: 2%">
        <a style="margin-right:15px" class="pointer" (click)="vote(true, post)"><i class="fas fa-thumbs-up"></i> {{p.upVotes}}</a>
        <a style="margin-right:15px" class="pointer" (click)="vote(false, post)"><i class="fas fa-thumbs-down"></i> {{p.downVotes}}</a>
      </div>
    </div>
  </div>
  <h5>Comments:</h5>
  <div class="form-group mb-3">
    <textarea [(ngModel)]="addComment" class="form-control" aria-label="With textarea" placeholder="Add comment..."></textarea>
  </div>
  <div>
    <button type="button" class="btn btn-primary ml-auto" (click)="addCommentToPost()">Post</button>
  </div>
  <div *ngFor="let c of p.comments" class="container">
    <div class="row comment-bubble">
      {{c.text}}
    </div>
  </div>
</div>

服务：

addComment(comment: EditComment): Observable<Comment> {
    return this.http.post<Comment>(`${this.baseUrl}/AddComment`, comment, this.httpOptionsAuthentication)
      .pipe(catchError(this.handleError));
  }

  handleError(error) {
    let errorMessage = '';
    if (error.error instanceof ErrorEvent) {
      // client-side error
      errorMessage = `Error: ${error.error.message}`;
    } else {
      // server-side error
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    console.log(errorMessage);
    return throwError(errorMessage);
  }

Answer 1

您正在创建一个新的可观察对象。您必须发出一个新值。

没有看到您的其余代码，例如：

post: Post; // I am assuming you have a type for a post.
post$ = new Subject<Post>(); // Our observable.
...
this.postService.addComment(commentdto).subscribe((comment) => {
  this.post.comments.push(comment);
  this.post$.next(this.post); // Emit a new value.
});

但这有点傻，既有变量又有可观察值。在这种情况下最好不要使用 AsyncPipe。

post: Post;
...
this.postService.addComment(commentdto).subscribe((comment) => {
  this.post.comments.push(comment);
});

<div *ngIf="post">
  <div class="post-container border-bottom border-dark mb-2">
    <h3 class="col-sm-12">{{post.text}}</h3>

如何将元素推送到可观察对象并更新 UI

how to push an element to an observable and update UI

angular

angular-observable

async-pipe