我有一个 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，它获取当前经过身份验证的用户的好友列表：
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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句