使用`Rxjs` 过滤器和映射进行数组迭代

Question

使用映射和过滤器迭代 array 的正确方法是什么？目前两者都期望单一值。但是我的 Observable 有数组。请告诉我正确的方法。

这是我的 ts:

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { filter, map, tap} from 'rxjs/operators';

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

  name = 'Angular';
  ranks:Observable<number[]>;
  rankList$:Observable<number[]>;

  constructor(){
    this.ranks = of([1,2,3,4,5]);
  }

  ngOnInit(){
    this.rankList$ = this.ranks.pipe(
      filter(n => n % 2 !== 0), map((num:number[]) => num)
      )
  }
}

出现错误：

The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.(2362)
(parameter) n: number[]

Live Demo

Answer 1

我认为您混合了数组过滤器和 observable filter，可观察过滤器将应用于发出的值，在您的情况下是整个数字数组，因此出现错误，可观察过滤器将检查发出的项目到可观察的并且如果条件为真它将继续发射，如果这是你的目标，你在可观察过滤器中的条件应该应用于作为数组的项目发射类型，但是如果你试图过滤发射的数组并且只发出奇数，那么 map 就是你应该使用的。

this.rankList$ = this.ranks.pipe(
  map((num: number[]) => num.filter(n => n % 2 !== 0))
);

使用`Rxjs` 过滤器和映射进行数组迭代

Array iterating with` Rxjs` filter and map

angular

rxjs

rxjs-pipeable-operators