使用 REST API 过滤数据 Err：“类型 'Observable<any>' 上不存在属性 'filter'”

如何解决使用 REST API 过滤数据 Err：“类型 'Observable<any>' 上不存在属性 'filter'”

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

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

第二个是： 错误 TS2339：类型上不存在属性“过滤器”

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

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>

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 数据库 这是 de json-server 的 JSON 文件

{
  "projects" : [
    {
      "project_id": "TEST-1","project_name": "Test 1","client_name": "I'm the test #1","client_email": "test@test.com","start_date": "11 Jun,2021","end_date": "30 Nov,"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": "test2@test.com",{
      "project_id": "TEST-3","project_name": "Test 3","client_name": "I'm the test #3","client_email": "test3@test.com",iusto nostrum nihil ipsum officiis ut aspernatur distinctio neque voluptas libero molestias?" 
    }
  ]
}

如果有人能帮我指明正确的方向，请

使用 REST API 过滤数据 Err：“类型 'Observable<any>' 上不存在属性 'filter'”

如何解决使用 REST API 过滤数据 Err：“类型 'Observable<any>' 上不存在属性 'filter'”

相关推荐