Question

我正在尝试整理从后端（node_js）获得的数据。现在，我正在实现一个简单的看板，我需要将数组中的数据分类到相应的数组中（因此，数组任务中状态为“要做”的所有元素都在数组“ to_do”中）。

我知道我可以在管道内进行简单的过滤，并只订阅对我重要的数据，但是有什么方法可以得到不是一个而是两个（或更多）带有数据的数组（我也可以解析我的订阅之外的这个问题，编写一个函数和过滤器，但我很好奇这是否可以在不编写其他函数的情况下以一种简洁的方式完成。

我试图用管道来做，但是我根本不知道怎么做。简单地在方法中放置几次filter就可以过滤数组，并且不返回任何内容（不存在同时完成的任务）。

board-view.component.ts

import { Component, OnInit } from '@angular/core';
import { Task } from '../shared/models/task';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { filter, map } from 'rxjs/operators';
import { Observable, of, pipe } from 'rxjs';

@Component({
  selector: 'app-board-view',
  templateUrl: './board-view.component.html',
  styleUrls: ['./board-view.component.css']
})
export class BoardViewComponent implements OnInit {

  tasks: Task[];
  token: string = '';

  tracks = ['none', 'to do', 'in progres', 'in review', 'done'];

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.token = localStorage.getItem('authToken');

    this.http.get<Task[]>('http://localhost:3000/api/tasks',
      { headers: new HttpHeaders({ 'x-auth-token': this.token }) })
      .pipe(map(res => res.filter(task => task.status === 'to do')))
        .subscribe
        (data => this.tasks = data);
  }
}

task.ts

export interface Task {
  id: string;
  name: string;
  createDate: string;
  createdBy: { id: string, name: string };
  assignedTo: { id: string, name: string };
  modificationDate: string;
  modifiedBy: { id: string, name: string };
  description: string;
  status: string;
  priority: string;
}

Answer 1

如果我理解正确，则可以使用reduce运算符来完成此操作。

这是Stackblitz上的一个简单演示

对于您特定的http调用，可能看起来像这样：

 this.http.get('http://localhost:3000/api/tasks',
        { headers: new HttpHeaders({ 'x-auth-token': this.token }) })
        .pipe(
          reduce<any, any>((acc, val) => {
           acc.myResultOne.push(val.id);
           acc.myResultTwo.push(val.name);
           return acc;
          }, { myResultOne: [], myResultTwo: []}
          )
        )
        .subscribe
       (data => console.log('my transormed tasks', data));

reduce是一个运算符，它实际上使您可以操纵可观察对象的结果。 acc（累加器）是结束的值，val是Observable（您的任务）的实际值

有关更多信息，请查看here或official documentation

筛选订阅多个输出（推入几个数组）

1 个答案: