類型&#39;observable&#39;不存在屬性&#39;filter&#39; <any> &#39;

Question

嘗試編譯時，出現錯誤

property 'filter' does not exist on type 'observable<any>'

搜索了一下之后，我發現了要插入的建議

import 'rxjs/add/operator/filter'

在此之后，我得到相同的錯誤，但排序

property 'sort' does not exist on type 'observable<any>'

因此，我刪除了排序，然后出現以下錯誤：

Type 'Observable<any> is not assignable to type 'any[]'. Property 'includes' is missing in type 'Observable<any>.

該信息是從json文件導入的

部分代碼：

import { Component, OnInit, Injectable } from '@angular/core';
import { UserinfoService } from '../services/userinfo.service';
import { Member } from '../class/member';
import { MatDialog } from '@angular/material';
import { MemberdialogComponent } from '../memberdialog/memberdialog.component';
import 'rxjs/add/operator/filter';

@Component({
    selector: 'app-teammembers',
    templateUrl: './teammembers.component.html',
    styleUrls: ['./teammembers.component.css']
})

export class TeammembersComponent implements OnInit
{

//props
teamMembers: any[];
searchQuery: any = "";
searchResults: any[] = this.teamMembers;
teams: any[];
selectedTeam: any;

//constructor
constructor(private userinfoService: UserinfoService, public dialog: MatDialog)
{
    //getData
  this.teamMembers = userinfoService.getMembers()
    .filter(member => member.isActive)
    .sort((a, b) => a.lastName.localeCompare(b.lastName));

    //put all information in results
    this.searchResults = this.teamMembers;

    //getTeams
    this.teams = this.teamMembers
        .map(item => item.team)
        .filter((value, index, self) => self.indexOf(value) === index)
}

userinfoservice的代碼：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

import { Member } from '../class/member';

@Injectable()
export class UserinfoService
{

    //constructor
    constructor(private http: Http)
    {

    }

    //methods or services

    getMembers()
    {
        return this.http.get('http://fakelocation/JsonData/api/teammembers').map(response => response.json())
    }

Answer 1

根據RxJS 6.0最新標准https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md ，可以通過將一個運算符的結果傳遞給另一個運算符來解決此問題。

this.teamMembers = userinfoService.getMembers()
    .pipe( .filter(member => member.isActive)
    .sort((a, b) => a.lastName.localeCompare(b.lastName)));