如何正确使用 RxJS 为返回到 Observable 的数组的每个对象添加一个新字段？

Question

我不是很喜欢 RxJS，我有以下疑问。

进入这个 Angular 服务 class 我有这个方法从 Firebase FireStore 数据库检索数据：

async getAllEmployees() { 
    return <Observable<User[]>> this.firestore.collection('users',ref => ref.where('profileType', '!=', 'admin')).valueChanges();          
  }

如您所见，它正在返回一个 User 对象的 Observable。

其中 User 是这个接口:

export interface User {
    firstName: string;
    surname: string;   
    completeName: string;  
    email: string;
    photoUrl: string;
    phoneNumber: string;
    companyName: string;
    vatID: string;
    profileType: 'admin' | 'user' | 'unknown';    
    UID: string;    
    approved:boolean;
}

现在我需要添加 completeName 字段（Firestore 上没有显示，因此不会检索到该字段），它是 firstName[= 的串联35=] 和 surname 字段到返回的 Observable 的检索数组的每个对象。我在想也许我可以使用 RxJS 地图运算符来完成这个任务。我试图做这样的事情：

return <Observable<Employee[]>> this.firestore.collection('users',ref => ref.where('isEmployee', '==', true)).valueChanges() .pipe(map(userObj => { const completeObj = { completeName = userObj["firstName"] + " " + userObj["surname"], ...userObj } console.log("completeObj: ", completeObj); return userObj; }));

但是这样做我得到它创建了以下对象（我可以在 console.log 到我的 Chrome 控制台中看到它）：

completeObj: {0: {…}, completeName: "undefined undefined"} 0: {firstName: "Andrea", isEmployee: true, socialSecurityCode: "NBLNDRH501O", password: "XXXXXX", isAdmin: false, …} completeName: "undefined undefined" __proto__: Object

所以基本上在我看来，它并没有将这个新的计算字段添加到作为 Observable 返回的数组的每个对象中，而是添加到 Observable 本身。

为什么？怎么了？我错过了什么？我该如何解决？

Answer 1

您不能通过赋值初始化属性。

这是一个对象：

{
  firstName: "Hillary",
  lastName: "Brown"
}

这不是有效的语法：

{
  firstName = "Hillary",
  lastName = "Brown"
}

我很惊讶你编译了什么。也许它在当前上下文（this）中做了一些奇怪的事情？我只是尝试做类似的事情，但无法为我编译。

此外，您的地图 return 与它获得的值相同，您可能想要 return 新对象。

return <Observable<Employee[]>> this.firestore.collection(
  'users',
  ref => ref.where('isEmployee', '==', true)
).valueChanges().pipe(
  map(userObj => ({
    ...userObj,
    completeName: userObj["firstName"] + " " + userObj["surname"]
  })),
  tap(completeObj => console.log("completeObj: ", completeObj))
);

Answer 2

您的 userObj 是一组员工。 rxjs operator map 映射这个数组，而不是数组元素。您需要的是“嵌套”地图。

return <Observable<Employee[]>> this.firestore.collection('users',ref => ref.where('isEmployee', '==', true))
  .valueChanges().pipe(
    map(usersArr => usersArr.map(user => ({ ...user, completeName: user.firstName + " " user.surname}))),
  );

如何正确使用 RxJS 为返回到 Observable 的数组的每个对象添加一个新字段？

How can I correctly use RxJS to add a new field to each object of an array returned into an Observable?

rxjs

typescript

angular

rxjs-observables