时间戳

首页 > 解决方案 > Angular 不能将异步管道与我的 observable 一起使用

angular - Angular 不能将异步管道与我的 observable 一起使用

问题描述

我想在我的模板中使用异步管道，但是从我的 api 获取数据时遇到问题。我已经使用了受下一个数据约束的行为，然后将其保存在可观察的范围内。当我在 html 中调用 observable 时，出现此错误：

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

好友列表.ts

  public friendSubject = new BehaviorSubject<any>(null);
  public friend$: Observable<any> = this.friendSubject.asObservable();


 getFriendList(userID: string) {
    userID = this.userID;
    try {
      return this.mainService.getFriendList(userID).subscribe((friendList) => {
        console.log(friendList)
        this.friendSubject.next(friendList);

        // friendList.data.forEach((friend => {
        // }))

        console.log(this.friendSubject)

      })
    }
    catch (err) {

    }
  }

朋友列表.html

  <ion-label class="friend-count" *ngIf="friend$ | async">{{(friend$ | async)?.length}}</ion-label> 
//this works..
   
            <div class="friend-list">
              <div *ngFor="let i = index; let friend of friend$ | async" class="friend">               
                  <div class="custom-img">
                    <ion-img class="friend-img" [src]="friend?.frendsView.photo"></ion-img>
                  </div>   
                  <ion-label></ion-label>             
    
              </div>

            </div>

在此处输入图像描述

我真的很想了解为什么它不起作用

标签： angulartypescript

解决方案

如果您需要将 BehaviorSubject 与异步管道一起使用，这将对您有所帮助。 https://angular.io/api/common/AsyncPipe

您的组件：

friend$: Observable<[]> = [];

getFriendList(userId: string) {
  this.friend$ = this.mainService.getLastFriend(+userId).pipe(
    catchError(error => of(error))
  );
}

你的主要服务：

private friendSubject = new BehaviorSubject<[]>(null);
private users = [
    {
        userId: 1,
        name: 'Max',
        friendList: {
          {id: 1, name: 'Bob'}, 
          {id: 2, name: 'Alex'},
          {id: 3, name: 'Kate'}
        }
    }
];

getLastFriend(userId: number): Observable<[]> {
  const friendList = this.getFriendList(userId);
  this.friendSubject.next(friendList);

  return this.friendSubject.asObservable();
}  

private getFriendList(userId: number): [] {
  return of(users).pipe(
    filter( ({userId}) => userId === userId),
    map(user => user.friendList)
  );
}

推荐阅读