Question

说我的HTML中有这个：

  <div>
    <mat-label>Matched events count: {{(getMatchedEventsCount() | async)?}}</mat-label>
  </div>
  <div>
    <mat-label>Total events count: {{(getTotalEventsCount() | async)?}}</mat-label>
  </div>

我的问题是，从这些辅助方法返回什么（就Observable而言）？

  getMatchedEventsCount(){
    return Observable.of(3);
  }

  getTotalEventsCount(){
    return Observable.of(5);
  }

但我的问题是 - 我们怎么能做一些实际上异步的事情？

目前，我收到此HTML解析错误：

未捕获错误：模板解析错误：解析器错误：意外结束表达式：匹配事件计数：{{（getMatchedEventsCount（）| async）？}}在表达式的末尾[匹配事件计数： {{（getMatchedEventsCount（）| async）？}}] in ng：///AppModule/EventsListComponent.html@40：21（“ [错误 - ＆gt;]匹配事件计数：{{（getMatchedEventsCount（）| async）？}} “）：ng：///AppModule/EventsListComponent.html@40:21解析器错误：条件表达式（getMatchedEventsCount（）| async）？需要表达式末尾的所有3个表达式[匹配事件计数：{{（getMatchedEventsCount（）| async）？}}] in ng：///AppModule/EventsListComponent.html@40：21（“ [错误 - ＆gt;]匹配事件计数：{{（getMatchedEventsCount（）| async）？}} “）：ng：///AppModule/EventsListComponent.html@40:21

Answer 1

我注意到您已经对注释帖子中的?进行了问题排查。 ?（称为"save navigation operator"）不起作用的原因是它在属性路径中防范null和undefined值，意味着您需要在使用?后尝试访问属性。现在，您正在尝试追溯使用它来查看对象是null还是undefined，但它只能向前看到对象，而不是向后，它需要一个属性来查找。

你是正确的，你应该从方法中返回Observable并将其提供给async管道。以下是关于async管道的一些文档：https://angular.io/api/common/AsyncPipe。

关于如何使用Subscription加载数据而不是Observable的评论主题中的问题...

您可以使用subscribe方法执行此操作，并将数据分配给组件上的属性，如下所示：

matchedEventsSub: Subscription;
matchedEventsCount: number;

getMatchedEventsCount() {
  this.matchedEventsSub = Observable.of(3).subscribe(value => {
    this.matchedEventsCount = value;
  });
}

请注意，subscribe Observable会返回Subscription。然后，您必须记住unsubscribe生命周期钩子中的订阅OnDestroy以防止内存泄漏：

ngOnDestroy() {
  if (this.matchedEventsSub) { this.matchedEventsSub.unsubscribe(); }
}

可以想象，如果在一个组件中有2个，3个，10个订阅，则会变得很麻烦。这就是Angular团队创建async管道的原因。

最后，

我们怎么能做一些实际上异步的事？

实际上非常简单。我们假设你有EventsService注入你的组件：

constructor(private eventsService: EventService) {}

该服务可以封装Http请求或其他内容 - Angular的HttpClient模块使用Observable来表示异步数据。您可以使用EventsService来获取这样的异步事件流：

matchedEventsCount$: Observable<number>;

getMatchedEventsCount(): Observable<number> {
  const allEvents$ = this.eventsService.getEvents();
  return allEvents$.map(events => events.length);
}

调用OnInit生命周期挂钩中的方法来填充数据：

ngOnInit() {
  this.getMatchedEventsCount();
}

然后将其显示在您的模板中：

<h1>Events: {{ matchedEventsCount$ | async }}</h1>

使用Observables“返回”异步数据

1 个答案: