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

Question

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

在这个 Angular 服务类中，我有这个方法从 Firebase FireStore 数据库中检索数据:

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

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

User 是这个接口(interface):

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 和 的串联surname 字段到返回的 Observable 的检索数组的每个对象。我在想也许我可以使用 RxJS map 运算符来完成这个任务。我试图做这样的事情:

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;
                                                    }));

但通过这种方式，我发现它创建了以下对象(我可以在 Chrome 控制台的 console.log 中看到它):

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

您的 userObj 是一个员工数组。 rxjs operator map 映射这个数组，而不是数组元素。您需要的是“嵌套” 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}))),
  );