如何通过循环访问 Observable<Object[]来创建对象数组>

Question

我有一个名为users的Google Firestore集合，其格式如下：

{
"contactNumber":"0123456789",
"email":"[e-mail]",
"location":[7.2906° N,80.6337° E],
"isOnline":false,
"name":"John"
}

字段CCD_ 2为CCD_。我在我的服务中获取用户记录，如下所示：

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { User } from '../models/user';
import { Marker } from '../models/marker';
@Injectable({
providedIn: 'root'
})
export class UserService {
users: Observable<User[]>;
markers:Marker[];
constructor(firestore: AngularFirestore) {
this.users = firestore.collection('users').valueChanges();
}
getUsers(){
return this.users;
}
getUserMarkers(){
}
}

属性CCD_ 4现在具有作为Observable的记录。

我想在这里实现的是，我有一个单独的模型，叫做Marker。我想使用用户记录中的字段为每个用户记录创建一个标记数组，并从getUserMarkers函数返回。

标记型号：

export interface Marker {
name?:String;
longitute?:Number;
latitude?:Number;
isOnline?:boolean;
}

longitute和latitude字段应使用user中的location和其他相应值(即name和isOnline(进行设置。做这件事最好的方法是什么？

更新：

使用其中一个答案，我想出了这个。

getUserMarkers() {
return this.getUsers().pipe(map(users => {
users.map(user => {
return {
name: user.name,
longitute: user.location._long,
latitude: user.location._lat,
isOnline: user.isOnline
}
});
})); 
}

从组件开始，我试图将其分配给这样的属性。

export class MapComponent implements AfterViewInit {
@ViewChild("mapContainer", { static: false }) gmap: ElementRef;
map: google.maps.Map;
markers: Marker[];
constructor(private userService : UserService) {
this.userService.getUserMarkers().subscribe(markers => {
this.markers = markers;
});
}

这里给出了一个错误Type 'void' is not assignable to type 'Marker[]'.，我试图将数组分配给属性this.markers = markers;有

Answer 1

如果您想将数组保持为可观察的，可以添加并使用map函数以您想要的方式格式化数据。该位置可能需要一些格式化来去掉° N、° S、° E和° W。

可观测

getUserMarkers() {
return this.getUsers().pipe(map(users => {
return users.map(user => {
return {
name: user.name,
longitute: user.geopoint._long,
latitude: user.geopoint._lat,
isOnline: user.isOnline
}
});
})); 
}

如果您想要一个纯数组，则需要声明一个单独的变量，并可能使用async/await方法

单独变量

markerArray = [];
getUserMarkers() {
this.getUsers().subscribe(markers => {
this.markerArray = markers.map(user => {
return {
name: user.name,
longitute: user.location[0]
latitude: user.location[0]
isOnline: user.isOnline
}
});
}); 
}

异步/等待

async getUsers(){
return this.users;
}
async getUserMarkers() {
let markerArray = [];
await this.getUsers().subscribe(markers => {
markerArray = markers.map(user => {
return {
name: user.name,
longitute: user.location[0]
latitude: user.location[0]
isOnline: user.isOnline
}
});
}); 
return markerArray;
}