angular - Firestore 列表仅显示新更新的项目(Angular + Ionic)
问题描述
我有 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>
解决方案
在您使用的代码中,.pipe(first())
,first()
将仅返回更新文档的第一项,因此您只会在valueChanges
执行时获取更新的文档。
您将不得不使用地图来遍历所有文档。
推荐阅读
- android - 发布 KMM 库时未解决的对类型别名、内联函数和扩展函数的引用
- flutter - 如何用不同的捆绑ID从不同的产品风格调用同一家商店?[Flutter in_app_purchase]
- android - Android TV 应用程序设计:视频细节和视频水平列表
- twig - 如何翻译变量?
- javascript - 为什么没有参数的测试在 Typescript 中失败?
- python - 查找标签列表和数据框索引之间的交集(Python Pandas)
- ansible - Jinja2 检查 lsit 是否为空
- javascript - JS RemoveEventListener 按类名来自动态添加的元素
- spring-boot - 声明列 TIME WITH TIME ZONE 时出现语法错误
- r - 以周计算时差