Question

我有一个angular 6应用程序，我正在尝试做一些我不知道可能做的事情。这相当复杂，请多多包涵。

我在模板中有这个

<div *ngIf="groupService.userGroups && groupService.userGroups.length > 0">
  <div *ngFor="let invitationWatcher of invitationService.getInvitations()">
    {{ invitationWatcher | json }}
  </div>
</div>

然后在组件中，我有这个：

getInvitations() {
  console.log(‘Getting invitations’);
  const groupedInvitations$: Observable<any>[] = [];
  this.groupService.userGroups.forEach(group => {
    const groupInvites$ = this._firestoreService.getCollection$(`Invitations/${group.groupID}/Invites`); // returns Observable<any>[]
    groupedInvitations$.push(groupInvites$);
  });
  return Observable.combineLatest(groupedInvitations$);
}

运行此命令时，我反复收到控制台消息“获取邀请”，并出现以下错误：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

这很有道理。该函数返回一个可观察值，而不是数组（或可迭代的值）。当我通过如下所示的异步管道传递函数调用时：

<div *ngFor="let invitationWatcher of invitationService.getInvitations() | async”>

错误消失了，但是我的浏览器死机了。我反复收到“获取邀请”消息。我必须杀死浏览器才能摆脱冻结状态。

我们想要的是：该函数应返回一个可观察的可观察对象，并最终解析为数组。

发生了什么：该函数被反复调用，导致浏览器冻结，并且每次都会返回一个新的observable。

解决这个问题的一种方法（我已经尝试过并且可行！）是从构造函数中调用getInvitations（），如下所示：

constructor(…) {
  this.groupService.userGroupsChange$.subscribe(result => {
    if (this.groupService.userGroups) {
      this.allInvitations$ = this.getInvitations();
    }
  });
}

然后获取用于观看allInvitations $的模板，而不是像这样调用函数：

<div *ngFor="let invitationWatcher of allInvitations$ | async”>

但这实际上不是一个选择。我们希望避免在任何初始化代码中将邀请设置为可观察到（我们有原因）。相反，我们希望直接调用该函数（无错误且浏览器不冻结）。

这可能吗？

ng要调用可观察的功能，是冻结浏览器

0 个答案: