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

Question

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

我返回 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);

还创建了一个 Stackblitz Demo 供您参考