Question

在我的情况下，我有两个问题：

1）为什么当我使用console.log

时，我的方法返回相同对象的2倍

2）为什么在添加过滤器时我的方法不起作用。 console.log返回了该对象，但是HTML中没有任何内容。

在我的后端中一切正常，并且reduxTool精确地向我显示每个对象一次。所以我认为我的错误出在我的管道上。如果我删除过滤器，一切正常，但是我确实需要这样做。

    requestList$: Observable<FriendRequest[]>;

    this.storefriends$.dispatch(new FriendsRequestFeatureStoreActions.GetFriendRequests());

    this.requestList$ = this.storefriends$.pipe(
      skipWhile(val => val === null),
      select(
        FriendsRequestFeatureStoreSelectors.selectAllFriendsRequest
      ),
      mergeMap((value: FriendRequest[]) => from(value)),
      filter((friend: any) => friend.to._id === this.user.profile),
      reduce((acc: FriendRequest[], friend: FriendRequest) => {
        console.log(friend);
        return acc.concat(friend);
      }, [])
    );

这是我的HTML：


 <div *ngFor="let f of requestList$ | async">
    ...          
 </div>

 <div *ngIf="(requestList$| async)?.length == 0">
  not request right now...
  </div>

在HTML中运行时，我什么都没有。谢谢有人能帮我。

Answer 1

您收到多个呼叫，因为每次我们使用async管道时，我们都会创建一个订阅。

<div *ngFor="let f of requestList$ | async">
    ...          
 </div>

<div *ngIf="(requestList$| async)?.length == 0">
  not request right now...
</div>

要解决此问题，您只需使用as关键字

<div *ngIf="requestList$ | async as requestList">
  <div *ngFor="let f of requestList">
    ...          
 </div>

 <div *ngIf="requestList?.length == 0">
     not request right now...
 </div>
</div>

订阅表格

1 个答案: