Question

我正在设置参数来获取数据，但是参数不起作用，我正在将整个值作为数组获取。获取时如何过滤数据。这是我将参数设置到service.ts文件的方法

   getinfojson(): Observable<IProduct[]> {

     let params = new HttpParams().set('projectname', "Sasi");

  this._http.get(this._producturl,{params : params}).subscribe( (res:Response)=>{
this.data = <IProduct[]> res.json();
console.log(this.data);
    })

我正在从json作为产品数组获取所有值，如下面的screebshot

但是我需要根据projectmanger名称获取详细信息。我该如何做到这一点。

我的产品json文件

{
    "product": [
        {
        "projectname":"Sasi",
        "Managername":"Shiva"
        },
        {
            "projectname":"Sasikala",
            "Managername":"Dhivya"
            },
            {
                "projectname":"SasiDhivya",
                "Managername":"Visu"
                }
    ]
}

下面为您提供的参考信息是我导入的ts服务

import { Injectable } from '@angular/core';
  import { IProduct } from './product';
  import { Http , Response, RequestOptions} from '@angular/http';
import {HttpClientModule, HttpParams, HttpHeaders} from '@angular/common/http';
import {Observable,of, from } from 'rxjs';
import { HttpModule } from '@angular/http';



@Injectable({
  providedIn: 'root'

})
export class ApiserviceService {
  data:any;
  ifb:any;
  private _producturl='../../assets/product.json';
   constructor(private _http: Http){}

   getinfojson(): Observable<IProduct[]> {

     let params = new HttpParams().set('projectname', "Sasi");

  this._http.get(this._producturl,{params : params}).subscribe( (res:Response)=>{
this.data = <IProduct[]> res.json();
console.log(this.data);
    })
    return this.data;

     }

Answer 1

HttpParams类帮助在不过滤响应的情况下向REST API添加请求参数，相反，您可以使用管道和映射来过滤数据例如：

 this._http.get(this._producturl,{params : params}).pipe(map((response) => {
    response = response.filter((data) => data.projectname === "Sasi" );
    return response;
})).subscribe( (res:Response)=>{
    this.data = <IProduct[]> res.json();
    console.log(this.data);
})

Answer 2

假设您要在此处输入项目名称，而将IProduct作为输出。

  this._http.get(this._producturl,{params : params})
    .pipe( 
       map( res => res.json() ),
       filter( res => res.product !== null ),
       map( res => {
          const matchingProduct = res.product.find( product => product. projectname === "Sasi");
          return matchingProduct;
       })
    )
    .subscribe( (matchingProduct)=>{
        this.data = matchingProduct;
        console.log(this.data);
    });

当您从流中取出数据时，我也不认为您正在使用rxjs，只是将整个流保存在ApiserviceService类中

this.data$ = this._http.get(this._producturl,{params : params})
  .pipe( 
    map( res => res.json() ),
    filter( res => res.product !== null ),
    map( res => {
     const matchingProduct = res.product.find( product => product. projectname === "Sasi");
     return matchingProduct;
    })
  );

如果需要渲染data$，只需使用async管道。如果您需要以其他方法使用它，请兑现承诺并等待。

async methodThatNeedsProduct() {
   const product = await this.data$.pipe(take(1)).toPromise()
   // product is not available here
}

如何通过参数过滤角度http get中的本地json数据？

2 个答案: