Angular Firebase 訂閱功能被調用兩次

Question

我正在嘗試使用 mapbox-gl 在地圖中的標記上的彈出窗口上制作按鈕。 這些按鈕允許訂閱/取消訂閱一個地方。 但是當我點擊它們時，我看到 subscribe 函數被調用了兩次並導致結果錯誤。

這是下面的第三個函數。

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”。 在點擊按鈕取消訂閱一次后，當我重新訂閱時，它返回兩次真，最后一次假。 所以我不能再訂閱這個地方，因為它直接進入真假。

有什么我做錯了嗎？

非常感謝您的寶貴時間。

編輯 ：

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

這里涉及的代碼很多，（如果你能提供最少的可重現代碼，人們可以更好地幫助你）

無論如何，我認為有問題的是，您永遠不會取消訂閱 observable 並且與您調用的loadPlaces一樣多，它會調用越來越多

一種解決方法是下面的代碼，因為first()導致您的訂閱結束

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