Question

我有一个应用程序，用户可以在其中添加评论，并显示评论，我的问题是直到刷新页面后才显示评论。

我希望在用户单击输入或提交按钮后显示评论

这是我到目前为止所拥有的：

获取数据service.ts

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才更新，直到刷新页面，然后我才能看到添加的注释错误

我在代码中缺少什么来完成我想要的？虽然是新手

Answer 1

您的代码不错，但不幸的是，Promise只能解析为一个值。

但是，可观察物可以为您提供实时数据流！

使moviesService.getComments（）方法返回可观察到的内容，并返回评论。

它应该看起来像这样（假设您使用的是有角度的HttpClient来获取注释）：

     cols_1 <- c("red", "green", "blue")
     cols_2 <- c("orange", "purple", "yellow")
     ggplot(iris, aes(x = Species, y = Sepal.Length)) +  
       geom_point(aes(color = Species)) + # Using color instead of fill 
       stat_summary(aes(fill = Species), color = 'black', geom = 'bar', fun.y = mean, alpha = c(0.5, 0.05, 1)) +  
     scale_color_manual(values = cols_1) + # colors your points 
     scale_fill_manual(values = cols_2) # fills your Summary Bars

您可以像这样食用可观察物：

// movieService.service.ts

import { HttpClient } from '@angular/common/http'

...

constructor(
  private http: HttpClient
)

getComments() {
  return this.http.get<Comments>(url)
}

...

最后在模板中：

// comment.component.ts

...

comments: Observable<Comments>

...

ngOnInit() {
  this.comments = this.movieService.getComments()
}

...

Answer 2

使用异步管道和可观察对象 Angular中的管道就像Linux中的管道一样工作。他们接受输入并产生输出。输出的内容取决于管道的功能。该管道接受promise或observable作为输入，并且只要解决promise或observable发出一些新值，它就可以更新模板。与所有管道一样，我们需要在模板中应用管道。

我们假设我们有一个API返回的产品列表，并且可以使用以下服务：

// api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ApiService {

  constructor(private http: HttpClient) { }

  getProducts() {
    return this.http.get('http://localhost:3000/api/products');
  }

}

上面的代码很简单-我们指定了getProducts（）方法来返回HTTP GET调用。

是时候在组件中使用此服务了。在这里，我们要做的是创建一个Observable并将getProducts（）方法的结果分配给它。此外，我们将每1秒钟发出一次调用，因此，如果API级别有更新，我们可以刷新模板：

// some.component.ts

import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { ApiService } from './../api.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/switchMap';

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

export class ProductsComponent implements OnInit {
  @Input() products$: Observable<any>;
  constructor(private api: ApiService) { }

  ngOnInit() {
    this.products$ = Observable
      .interval(1000)
      .startWith(0).switchMap(() => this.api.getProducts());
  }

}

最后但并非最不重要的一点，我们需要在模板中应用异步管道：

<ul>
  <li *ngFor="let product of products$ | async">{{ product.prod_name }} for {{ product.price | currency:'£'}}</li>
</ul>

这样，如果我们将一个新项目推送到API（或删除一个或多个项目），更新将在1秒钟内在组件中可见。

Angular 6：实时数据

2 个答案: