Firestore 列表仅显示新更新的项目（Angular + Ionic）答案

【问题标题】：Firestore list only shows the newly updated item (Angular + Ionic)Firestore 列表仅显示新更新的项目（Angular + Ionic）
【发布时间】：2021-01-09 08:22:20
【问题描述】：

我遇到了 angular+ionic+firestore 的问题。请参阅下面我的代码。我在filteredMarkers() 中做initialiseItems()。但是，每当我更新列表中的项目并返回检查列表时，只会显示更新的项目而不是整个列表。我在这里看到什么问题？非常感谢您的帮助❤️

这是我的角码：

async ionViewWillEnter() {
  console.log("ionViwWillEnter");
  await this.getCurrentLocation();
  this.offerList = await this.filterMarkers();
}

async initialiseItems(): Promise < any > {
  const initialOfferList = this.firestore
    .collection("offers")
    .valueChanges()
    .pipe(first())
    .toPromise();

  return initialOfferList;
}

async filterMarkers() {
  await this.getCurrentLocation();
  this.markers = await this.initialiseItems();
  this.mapsAPILoader.load().then(() => {
    console.log(
      "searchLocation is: " + this.geoLocationService.getLatitude(),
      this.geoLocationService.getLongitude()
    );
    const center = new google.maps.LatLng(
      this.geoLocationService.getLatitude(),
      this.geoLocationService.getLongitude()
    );
    //markers located within 50 km distance from center are included
    this.filteredMarkers = this.markers.filter((m) => {
      const markerLoc = new google.maps.LatLng(
        m.location.latitude,
        m.location.longitude
      );
      const distanceInKm =
        google.maps.geometry.spherical.computeDistanceBetween(
          markerLoc,
          center
        ) / 1000;
      if (distanceInKm < 50.0) {
        return m.location;
      }
    });
  });
  return this.filteredMarkers;
}

<ion-list *ngFor="let offer of filteredMarkers" (click)="goTo(offer)" class="ion-no-padding">
  <ion-item lines="none" class="offer ion-no-padding">
    <div class="item-content">
      <ion-card>
        <img [src]="offer.headImg" class="center-cropped" />
        <ion-card-content>
          <!-- <ion-img [src]="offer.offerProfileImg"></ion-img> -->
          <ion-row>
            <ion-col size="4" class="ion-text-left">
              <div class="userImg">
                <ion-item lines="none" class="ion-item-userPI">
                  <ion-avatar slot="start">
                    <img [src]="offer.userPI" />
                  </ion-avatar>
                </ion-item>
              </div>
            </ion-col>
            <ion-col size="8">
              <div class="offerDes">
                <ion-card-title>{{offer.title}}</ion-card-title>
                <ion-card-subtitle>{{offer.payRate}}</ion-card-subtitle>
              </div>
            </ion-col>
          </ion-row>
          <ion-row class="ion-align-items-center">
            <ion-col size="6">
              <div class="star">
                <ion-badge color="primary" mode="ios">
                  <ion-icon name="star"></ion-icon>
                  4.5
                </ion-badge>
              </div>
            </ion-col>
          </ion-row>
        </ion-card-content>
      </ion-card>
    </div>
  </ion-item>
</ion-list>

【问题讨论】：

标签： angular list firebase ionic-framework google-cloud-firestore

【解决方案1】：

在您使用的代码中，.pipe(first())、first() 将仅返回已更新文档的 第一个 项，因此您仅在执行 valueChanges 时才获得更新后的文档。

您必须使用映射来遍历所有文档。

【讨论】：