使用.forEach和.some比较两个Observable，如数组

Posted 2021-03-30

我有一个Observable，我异步绑定到视图，我想比较Observable发出的值到另一个Observable，看看它们的任何值是否重叠。

我之前通过拥有两个对象数组来实现这一点，我们可以称之为CurrentUserFriends，另一个我们称之为usersToCheck。

现在我想比较两个对象阵列，看看是否有任何值重叠（如果你是别人朋友的朋友）。所以我设置utc.isFriend = true的价值，如果他们是共同的朋友，或utc.isFriend = false，如果他们不是共同的朋友。

这是我的checkIfFriend函数：

checkIfFriend(usersToCheck) { return usersToCheck.forEach(utc => { return utc.isFriend = this.currentFriends.some(cuf => cuf.uid === utc.uid); }，

现在，我想允许Angular通过在视图中使用异步管道来处理我的订阅，但是我仍然需要找出是否usersToCheck[FriendID].isFriend，但我不确定使用Observables的最佳方法。

这是currentFriends observable获取当前authed用户的好友列表：

currentFriends$: Observable<any[]> =this.profileService.getProfileFriends(this.auth.getUid());

这是$ profileFriends Observable，它可以获取您正在查看的个人资料的朋友。

profileFriends$: Observable<any[]> =this.profileService.getProfileFriends(this.uid)
.map(friends => [...friends])
//.map(friends => this.friendsService.checkIfFriend(friends));

我现在的$ profileFriends observable给出了我拿出的数据：

    //.map(friends => this.friendsService.checkIfFriend(friends));

但我需要该部分来验证视图。但我不知道如何更新checkIfFriend以便它可以查看来自两个Observable的数据，比较一个中的uid是否在另一个中，然后将friendUid.isFriend设置为true或false。

编辑：这是我的模板，以进一步澄清：

<ion-list>
<ion-list-header>Friends</ion-list-header>
<ion-item no-lines *ngFor="let friend of (people$ | async)">
  <ion-avatar (tap)="navToUserProfile(friend.uid)" class="avatar" item-left>
    <img src="{{friend?.image}}">
  </ion-avatar>

  <h4 (tap)="navToUserProfile(friend?.uid)">{{friend?.name}}</h4>
  <p>{{friend?.username}}</p>
  <p>{{friend?.isFriend}}</p>

  <ion-buttons item-end end>

    <button *ngIf="!friend?.isFriend" ion-button small (tap)="friendModal(friend)">Friends

    </button>

    <button *ngIf="friend?.isFriend" ion-button small (tap)="friendModal(friend)">Add Friend

    </button>


    <!--<button *ngIf="(!friend.isFriend && !friend.requestSent && friend.uid != this.auth.getUid())"-->
            <!--outline ion-button small (tap)="sendRequest(friend)">Add Friend-->
    <!--</button>-->

    <button *ngIf="!friend?.isFriend && friend?.requestSent"
            color="facebook" ion-button small (tap)="deleteRequest(friend)">Request Sent
    </button>
  </ion-buttons>
</ion-item>

答案

如何做到这一点的简单示例：

const friends$ = Rx.Observable.of([
    {id: 1, name: 'Mark'},
    {id: 2, name: 'John'},
    {id: 3, name: 'Adam'},
    {id: 4, name: 'Lucy'},
    {id: 5, name: 'Mary'}
]);

const people$ = Rx.Observable.of([
    {id: 11, name: 'Greg'},
    {id: 4, name: 'Lucy'}, // is a friend
    {id: 13, name: 'Julia'},
    {id: 14, name: 'Eugene'},
    {id: 1, name: 'Mark'} // is a friend
]);

// just some functions that imitate the delay
const getFriends = () => Rx.Observable.timer(800).switchMap(() => friends$);
const getPeople = () => Rx.Observable.timer(1500).switchMap(() => people$);


function checkIfFriend(friends) { // I used currying to be able to use map
   return person => {
     return Object.assign({}, person, {isFriend: friends.some(({id}) => person.id === id)});
  }
}

Rx.Observable.zip(getPeople(), getFriends()) // zip combines two streams and packages them into an array, which you can destructure later
    .map(([people, friends]) => people.map(checkIfFriend(friends))) // don't confuse the .map from rxjs with map from Array.prototype
  .subscribe(people => {
    console.log(people);
  })

这是一个有效的JSfiddle：http://jsfiddle.net/9d1tknjg/1/

更新这是动态更改按钮文本的一种方法：

<button ion-button small (tap)="friendModal(friend)">
    {{ friend?.isFriend ? 'Add Friend' : 'Friends' }}
</button>