Question

以下代码对我有用，直到我将Angular从5升级到6。

对象类：

export class Gizmo{
  name: string;
  description: string;

  constructor(name?: string, desc?: string) {
    this.name = name;
    this.description = desc;
  }
}

服务：

  findGizmos(gizmoFindParams: GizmoFindParameters): Observable<Gizmo[]> {
    return this.http
      .get<Gizmo[]>(this.uriVar + "",
        {
          params: this.SetParameters(gizmoFindParams)
        });
  };

组件方法：

filterGizmoData(searchString?: string): Observable<Gizmo[]> {

    let tfp = new GizmoFindParameters(); 

    if (searchString != undefined) {
      tfp.value = searchString.trim();
    }

    return this.dataCatalogService.findGizmos(tfp).pipe(
    map(x => x.filter(y => !this.detail.detailItem.gizmos.includes(y.name))));
  };

代码应该做什么。

该服务将返回Gizmo的Observable数组。

例如：

Gizmo1
Gizmo2
Gizmo3
Gizmo4

该方法之前，调用this.detail.detailItem.gizmos包含值

Gizmo2
Gizmo3

当我调用filterGizmoData时，我希望它会返回

Gizmo1
Gizmo4

相反，它将返回Gizmos的整个列表。

正如我所说的，这在我的项目是Angular 5时起作用。这是当时的代码。

   return this.dataCatalogService.findGizmos(tfp)
   .map(x =>       
      x.filter(y => !this.detail.detailItem.gizmos.includes(y.name))
    );

如何使此代码在Angular 6中运行？

控制台窗口中也没有错误。

编辑（按要求显示导入）：

import { tap, debounceTime, distinctUntilChanged, startWith ,  map } from 'rxjs/operators';

编辑2（根据要求添加代码）

private filterGizmos: Observable<Gizmo[]>;
//Various parts of my program do this:
this.filterGizmos = this.filterGizmoData();

模板：

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
      <mat-option *ngFor="let gizmo of filterGizmos | async" [value]="gizmo.name" (onSelectionChange)="gizmoSelectionChange(gizmo)">
        {{gizmo.name}}
      </mat-option>
    </mat-autocomplete>

Answer 1

请参阅RXJS 6文档，这是RXJS问题。有两种解决方案。

添加rxjs-compat，以向后兼容RXJS 5或更低版本。
在RXJS 6中，运算符应始终在管道内运行，所以...

这应该有效，但是为什么要在有过滤器运算符的情况下在地图运算符中进行过滤？

return this.dataCatalogService.findGizmos(tfp)
    .pipe(
        map(y => !this.detail.detailItem.gizmos.includes(y.tag))
    )

或

return this.dataCatalogService.findGizmos(tfp)
    .pipe(
        filter(y => !this.detail.detailItem.gizmos.includes(y.tag))
    )

从Angular 5升级到6后，过滤不起作用

1 个答案: