json - 使用 REST API 过滤数据错误：“可观察类型上不存在属性‘过滤器’’。”

Question

我正在尝试在我的 Ionic 应用程序中创建一个过滤器按钮，但出现两个错误

第一个是： this.filteredData.filter不是函数

第二个是： error TS2339: Property 'filter' does not exist on type

我把我的代码留在这里，以展示我到目前为止所做的尝试

HTML

    <ion-header>
  <ion-toolbar>
    <ion-title color="primary"> Proyectos </ion-title>
    
    <ion-buttons slot="end">
      <ion-button (click)="dataFilter()" color="primary">
        <ion-icon slot="icon-only" name="funnel-sharp"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-card mode="ios" *ngFor="let project of projects |  async">
    <ion-card-header>
      <ion-card-title color="primary"> {{ project.project_name }} </ion-card-title>
      <ion-card-subtitle> {{ project.project_id }} </ion-card-subtitle>
      <ion-card-subtitle> Fecha de inicio: {{ project.start_date }} </ion-card-subtitle>
      <ion-card-subtitle> Fecha estimada de entrega: {{ project.end_date }} </ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <ion-card-subtitle> Descripción </ion-card-subtitle> 
      {{ project.project_description }} 
    </ion-card-content>

    <ion-button (click)="btnDelete()" expand="block" color="danger" fill="clear">
      Borrar
      <ion-icon slot="start" name="trash-outline"></ion-icon>
    </ion-button>
  </ion-card>
</ion-content>

TS

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';

import { RestServicesService } from 'src/app/services/rest-services.service';

@Component({
  selector: 'app-proyectos',
  templateUrl: './proyectos.page.html',
  styleUrls: ['./proyectos.page.scss'],
})
export class ProyectosPage implements OnInit {
  isActive: boolean = false;
  projects: Observable <any>;
  filteredData: Observable <any>;

  constructor( private restService: RestServicesService, private navCtrl: NavController ) {
    this.filteredData = this.restService.getProjects();
  }

  ngOnInit() {
    this.projects = this.restService.getProjects();
  }

  btnDelete() {
    console.log("Delete!!!");
  }

  dataFilter() {
    this.filteredData = this.filteredData.filter((project) => {
       return true;
     });
    console.log("filtroooo");
  }

}

服务 我正在使用在 json-server 中制作的本地 REST API

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class RestServicesService {

  constructor(  private http: HttpClient) { }

  getProjects() {
    return this.http.get('http://localhost:3000/projects');
  }
}

Json db 这是 de json-server 的 JSON 文件

{
  "projects" : [
    {
      "project_id": "TEST-1",
      "project_name": "Test 1",
      "client_name": "I'm the test #1",
      "client_email": "[e-mail]",
      "start_date": "11 Jun, 2021",
      "end_date": "30 Nov, 2021",
      "project_description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, culpa. Accusamus ad vitae quae pariatur sunt iste quo, iusto nostrum nihil ipsum officiis ut aspernatur distinctio neque voluptas libero molestias?" 
    },
    {
      "project_id": "TEST-2",
      "project_name": "Test 2",
      "client_name": "I'm the test #2",
      "client_email": "[e-mail]",
      "start_date": "11 Jun, 2021",
      "end_date": "30 Nov, 2021",
      "project_description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, culpa. Accusamus ad vitae quae pariatur sunt iste quo, iusto nostrum nihil ipsum officiis ut aspernatur distinctio neque voluptas libero molestias?" 
    },
    {
      "project_id": "TEST-3",
      "project_name": "Test 3",
      "client_name": "I'm the test #3",
      "client_email": "[e-mail]",
      "start_date": "11 Jun, 2021",
      "end_date": "30 Nov, 2021",
      "project_description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, culpa. Accusamus ad vitae quae pariatur sunt iste quo, iusto nostrum nihil ipsum officiis ut aspernatur distinctio neque voluptas libero molestias?" 
    }
  ]
}

如果有人可以帮助我指出正确的方向，请

标签： jsonrestionic-frameworkfrontendjson-server