时间戳

首页 > 解决方案 > 过滤订阅多个输出（推送到几个数组）

angular - 过滤订阅多个输出（推送到几个数组）

问题描述

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

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

我试图用管道做到这一点，但我根本不知道怎么做。简单地在方法中放置几次过滤器将过滤数组并且不返回任何内容（没有同时完成和要做的任务）。

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

任务.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;
}

标签： angulartypescript

解决方案

如果我理解正确，您可以使用运算符执行此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 是一个运算符，它实际上可以让您操纵 observable 的结果。（acc累加器）是您将得到的val值，是您的 Observable（您的任务）的实际值

有关更多信息，您可以查看此处或官方文档

推荐阅读