javascript – Angular 6：实时数据

我有一个应用程序,其中用户可以添加注释,并显示注释,我的问题是注释不显示,直到我刷新页面.

我希望在用户单击“输入”或“提交”按钮后显示注释

这是我到目前为止：

>获取数据服务

this.activeRouter.params.subscribe((params) => {
  let id = params['id'];
  this.moviesService.getComments(id)
    .then(comments => {
      console.log(comments);
      this.comments = comments;
    });
});

2.然后显示到前端：html

   <div *ngFor="let comment of comments" class="col-md-7">
          <ul class="list-group">
            <li class="list-group-item">Author: {{comment.author}}</li>
            <li class="list-group-item">Comments: {{comment.description}}</li>
          </ul>
          <br>
        </div>

不幸的是,当我的服务器更新JSON时,html根本没有更新,直到我刷新页面然后我可以看到添加的注释错误

我的代码中缺少什么来实现我想要的？新手虽然

解决方法:

你的代码很好但不幸的是Promise只能解析为一个值.

但是,observables可以为您提供实时数据流！

使moviesService.getComments()方法返回一个返回注释的observable.

它应该看起来像这样(假设你使用角度HttpClient来获取注释)：

// movieService.service.ts

import { HttpClient } from '@angular/common/http'

...

constructor(
  private http: HttpClient
)

getComments() {
  return this.http.get<Comments>(url)
}

...

您可以像这样使用observable：

// comment.component.ts

...

comments: Observable<Comments>

...

ngOnInit() {
  this.comments = this.movieService.getComments()
}

...

最后在模板中：

// comments.component.html

 <div *ngFor="let comment of comments | async" class="col-md-7">
  <ul class="list-group">
    <li class="list-group-item">Author: {{comment.author}}</li>
    <li class="list-group-item">Comments: {{comment.description}}</li>
  </ul>
  <br>
</div>