Question

我正在尝试使用mapbox-gl在地图上的标记上弹出按钮。这些按钮允许订阅/取消订阅一个地方。但是，当我单击它们时，我看到订阅函数被调用了两次，并导致结果错误。

这是下面的第三个功能。

loadPlaces() {
this.placeService.getAll().subscribe(
    (places: Place[]) => {
      this.places = places;
      this.places.forEach((place: Place) => {

        const popup = new mapboxgl.Popup({ offset: 25 })
            .setDOMContent(this.setPopUpContent(place));

        new mapboxgl.Marker({color: 'red'})
            .setLngLat(place.coordinates)
            .setPopup(popup)
            .addTo(this.map);
      });
    }
);

}

setPopUpContent(place: Place) {
const popupContent = document.createElement('div');

const title = document.createElement('p');
title.innerText = place.name;

const button = document.createElement('button');
button.innerText = 'Subscribe';
this.setSubscribeButton(place, button);

popupContent.append(title, button);
return popupContent;

}

setSubscribeButton(place: Place, button: any) {
  this.placeSubscriptionService.isSubscribed(this.authService.getCurrentUser().uid, place.id).subscribe(subscribed => {
      console.log(subscribed);
      if (!subscribed) {
          button.innerHTML = 'Subscribe';
          button.onclick = () => {
              this.subscribe(place);
          };
      } else {
          button.innerHTML = 'Unsubscribe';
          button.onclick = () => {
              this.unsubscribe(place);
          };
      }
  });

}

subscribe(place: Place) {
const placeSubscription: any = {
  userId: this.authService.getCurrentUser().uid,
  placeId: place.id
};
this.placeSubscriptionService.create(placeSubscription);

}

unsubscribe(place) {
  this.placeSubscriptionService.getSubscriptionId(this.authService.getCurrentUser().uid, place.id).subscribe(subscriptionId => {
      this.placeSubscriptionService.delete(subscriptionId);
  });

}

如果用户订阅了Firestore上的位置，则此处的服务代码将终止：

isSubscribed(userId: string, placeId: string): Observable<boolean> {
return this.firestore.collection<PlaceSubscription>(this.collectionName, ref => ref
    .where('userId', '==', userId)
    .where('placeId', '==', placeId))
    .snapshotChanges()
    .pipe(map(placeSubscriptions => {
      const placeSubscription = placeSubscriptions[0];
      if (placeSubscription) {
        return true;
      } else {
        return false;
      }
    }));

}

当我单击要订阅的位置的按钮时，当我显示函数的结果为isSubscribed时，它将返回两次“ true”。在按下按钮以退订一次该位置后，当我重新订阅时，它将返回两次true，最后是false。所以我不能再订阅该地点，因为它直接变为true和false。

我做错了什么吗？

非常感谢您的宝贵时间。

编辑：

let subscription: Subscription;

        const popup = new mapboxgl.Popup({ offset: 25 })
            .on('open', () => {
                console.log('open');
                subscription = this.placeSubscriptionService.isSubscribed(this.authService.getCurrentUser().uid, place.id)
                    .pipe(first()).subscribe(
                    subscribed => {
                        console.log(subscribed);
                        popup.setDOMContent(this.setPopUpContent(place, subscribed));
                    });
            })
            .on('close', () => {
                if (subscription) {
                    subscription.unsubscribe();
                }
            });




setPopUpContent(place: Place, subscribed: boolean) {
const popupContent = document.createElement('div');
const title = document.createElement('p');
title.innerText = place.name;

const button = document.createElement('button');
button.innerText = 'Subscribe';
if (subscribed) {
    button.innerText = 'Unsubscribe';
    button.onclick = () => {
        this.unsubscribe(place);
    };
} else {
    button.innerText = 'Subscribe';
    button.onclick = () => {
        this.subscribe(place);
    };
}
popupContent.append(title, button);
return popupContent;

}

Answer 1

这里涉及很多代码（如果您可以提供最少的可复制代码，人们可以为您提供更好的帮助）

无论如何，我认为是问题，您永远都不会取消订阅可观察的内容，并且您调用loadPlaces的人数会越来越多

一种解决方法是在代码下方，因为first()会导致您的订阅被终止

this.placeService.getAll()
.pipe(
  first()
)
.subscribe(

Angular Firebase订阅函数被调用两次

1 个答案: