将 observable 返回的对象数组转换为另一种类型的数组

Question

情况是这样的：我有“任务服务”返回一个可观察的任务数组：

  getMissions(): Observable<Mission[]> {
  return this.http.get<Mission[]>(this.MissionUrl).pipe(
    tap(_ => this.log('Fetched missions.')),
    catchError(this.handleError('getMissions: ', []))
  );

以及组件内这个完美运行的订阅者功能：

export class TreeViewerComponent implements OnInit {
  missions: Mission[];
  Nodes: Node[]=[];
  Edges: Edge[];

  constructor(private missionService: MissionService,
              private messageService: MessageService) { }

  ngOnInit() {
      this.getNodes();

  }

    getNodes(): void {
      this.missionService.getMissions()
      .subscribe(missions => {
          this.missions = missions;
          this.doThis();
        })
}

    doThis(): void{
      console.log('tree-viewer component1: '+this.missions);
      for (var i=0;i<this.missions.length;i++)
      {
        var tempNode= {id: this.missions[i].key, label: this.missions[i].Title};
        console.log(tempNode);
        this.Nodes.push(tempNode);
      }
      this.getEdges();
      this.wrapData();
    }

问题是，它不是一个很好的关注点分离。查看器组件不应该处理所有这些业务逻辑。我想将类型转换从 Mission 类型（从远程服务器返回）中分离出来，以便将 Node 类型输入到另一个服务中。

如何异步执行？

实施后修改建议：

我还是做错了什么。正如建议的那样，我在 treeHandlerService 中有两个版本的 getNodes 方法。第一个是@fmontes 建议的实施，确实有效：

  getNodes(): void
  {
    this.missionService
        .getMissions()
        .pipe(
            flatMap((missions: Mission[]) => missions), // this will pass each mission to the map
            map((mission: Mission) => { // this will turn each Mission into a Node
                return new Node(mission.key, mission.Title) ;
            }),
            toArray() // this will group the nodes into an array of nodes
        )
        .subscribe((nodes: Node[]) => {
            this.Nodes = nodes;
            this.log('nodes: '+this.Nodes[0].label);//the log shows that it is working!
        });
  }

唉，当我去组件读取treeHandlerService.Nodes（异步更新的数组）时，它仍然是未定义的（意味着异步活动还没有完成）。

另一个版本是缩短的，我试图立即返回值：

  getNodes(): Observable<Node[]> {
    return this.missionService.getMissions().pipe(
      map((mission: Mission) => { // this will turn each Mission into a Node
          return new Node(mission.key, mission.Title) ;
      }),
      toArray()
    )
  };

但它甚至无法编译！我收到以下错误：

ERROR in src/app/tree-handler.service.ts(39,7): error TS2345: Argument of type 'OperatorFunction<Mission, Node>' is not assignable to parameter of type 'OperatorFunction<Mission[], Node>'.

类型“任务”不能分配给类型“任务[]”。 “任务”类型中缺少属性“长度”。

请大家帮忙...

Answer 1

你可以这样做：

// Don't forget to import the operators
import {map, flatMap, toArray} from 'rxjs/operators';


this.missionService
    .getMissions()
    .pipe(
        flatMap((missions: Mission[]) => missions), // this will pass each mission to the map
        map((mission: Mission) => { // this will turn each Mission into a Node
            return { id: mission.key, label: mission.Title };
        }),
        toArray() // this will group the nodes into an array of nodes
    )
    .subscribe((nodes: Node[]) => {
        this.nodes = nodes;
    });

Answer 2

我认为可以进一步简化如下：

import { map, catchError } from 'rxjs/operators';

export class MissionService {

  ...

  getMissions(): Observable < Mission[] > {
    return this.http.get < Mission[] > (this.MissionUrl).pipe(
      map(missions => missions.map(mission => ({ 
        id: mission.key,
        label: mission.Title }) 
      )),
      catchError(this.handleError('getMissions: ', []))
    );
  }

  ...

}

在这里，我没有额外使用 flatMap 和 toArray 运算符，而是简单地使用 Rxjs 的 map 运算符和数组上的 map 方法来完成必要的工作。

然后在你的组件类中：

export class TreeViewerComponent implements OnInit {
  missions: Mission[];
  Nodes: Node[] = [];
  Edges: Edge[];

  constructor(
    private missionService: MissionService,
    private messageService: MessageService
  ) {}

  ...

  getNodes(): void {
    this.missionService.getMissions()
      .subscribe(missions => {
        this.missions = missions;
      });
  }

  ...

}