如何使用map()运算符为Observable列值添加前缀

Question

我有一个从服务方法返回的Observable值，我想使用map()运算符添加一个前缀，例如"Prof"作为前缀。

我返回Observable的方法是：

list(): Observable<EmployeesDto> { 
items: Employees;
...
}

这是我试图绘制数据并分配数据的方法：

...
employeeList : EmployeesDto;
this.service.list()
.pipe(
map((list: EmployeesDto) => {
list.items.forEach(m => {
m.Name = 'Dr.' + m.Name
});
this.employeeList = list; // the code does not hit there and cannot set data
})
)

但问题是我无法设置employeeList。那么，这个实现有什么问题呢？

更新：在最后一步中，我使用了以下方法：

import { Component, OnInit } from "@angular/core";
import { of, Observable } from "rxjs";
import { map } from "rxjs/operators";
@Component({
selector: "my-app",
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
employees$: Observable<any[]>;
employeesDto$: Observable<any[]>;
constructor() {}
ngOnInit(): void {
this.initializeData();
}
initializeData(): void {
// this.employees$ = this.getMockEmployees().pipe(
//   map(list => list.map(item => ({ ...item, name: `Dr. ${item.name}` })))
// );
this.employees$ = this.getMockEmployeesDto().pipe(
map(list => list.map(item => ({ ...item, name: `Dr. ${item.name}` })))
)
.subscribe(list => {
console.log(list);
}
)
}
getMockEmployees(): Observable<any[]> {
const employees = [
{
name: "Ariana",
age: 1
},
{
name: "Tom",
age: 2
},
{
name: "Justin",
age: 3
}
];
return of(employees);
}
getMockEmployeesDto(): Observable<any[]> {
const employees$: Observable<any[]>;
const employeesDto = [
{
name: "Ariana",
age: 1
},
{
name: "Tom",
age: 2
},
{
name: "Justin",
age: 3
}
];
return of(employeesDto);
}
}

Answer 1

您可以尝试以下操作：

this.service
.list()
.pipe(
map((list: EmployeesDto) => list.map(item => ({...item, Name: `Dr. ${item.Name}`})))
)
.subscribe(list => this.employeeList = list);

还创建了一个Stacklitz演示供您参考