javascript - 使用Service从JSON读取特定 key

我对所有JavaScript和角度都不熟悉。所以我努力做到以下几点：
我有以下服务，用于从本地JSON文件读取X。 X是用户从下拉框中选择的内容：

   getBySector(sector){

    this.http.get('../../assets/Sectors.json').map(res => res).subscribe
    (res => {
        this.SectorsArray = res as ISectors[];

        this.SectorsArray= res.find(item=>item.Sector===sector);

         console.log(this.industrySectorsArray);
         return this.industrySectorsArray;
      },
      (err: HttpErrorResponse) => {
        console.log (err.message);
      }
    )
  }

作为补充说明，我有一个接口，它是ISector并与JSOn文件匹配。

上面的代码在控制台中提供了我所期望的确切信息。如下所示：

{IndustrySector: "Households", isSelected: "false", dataSubjectCategories: Array(2), dataTypeCategories: "Data", SubIndustries: Array(2)}

如何将上面的object / json输出返回到我称为服务的ms TS文件中？
我做了以下失败的事情：

 //even this failed:
 console.log(this.readjsonService.getBySector(mission));

 //
 var output:Isector;
 output=this.readjsonService.getBySector(mission)

 // cannot subscribe to it as well

 

顺便说一句，发现给了我以下错误：
 错误TS2339：类型“对象”上不存在属性“查找”。

更新：

我在答复人员的帮助下解决了代码存在的问题。但是该代码出现了另一个错误，尽管可以正常工作。 t说：

“无法读取未定义的属性'dataSubjectCategories'”

dataSubjectCategories是ISector中的关键之一：这是ISector：

export interface ISectors {
  IndustrySector: string;
  isSelected: string;
  dataSubjectCategories:string[];
  dataTypeCategories:string[];
  SubIndustries:[{
    IndustrySector: string;
    isSelected: string;
    dataSubjectCategories:string[];
    dataTypeCategories:string[];
    SubIndustries:[{}]
  }]
}

请帮助解决此问题。非常感谢。

最佳答案

通常，您的服务应仅返回Observable，并且不应包括订阅。最佳做法是建议您尽可能地靠近UI。

我的服务方法如下：

  getProducts(): Observable<IProduct[]> {
    return this.http.get<IProduct[]>(this.productUrl).pipe(
      tap(data => console.log('All: ' + JSON.stringify(data))),
      catchError(this.handleError)
    );
  }

  getProduct(id: number): Observable<IProduct | undefined> {
    return this.getProducts().pipe(
      map((products: IProduct[]) => products.find(p => p.productId === id))
    );
  }

在get：get<IProduct[]>上使用通用参数可以帮助Angular自动将返回的响应映射到数据数组，即示例中的ISectors。

组件中的调用代码如下所示：

  getProduct(id: number) {
    this.productService.getProduct(id).subscribe(
      product => this.product = product,
      error => this.errorMessage = <any>error);
  }

请注意，这是我们订阅的地方。然后，它在传递给订阅方法的第一个函数中获取产品。

您可以在此处找到完整的示例：https://github.com/DeborahK/Angular-GettingStarted/tree/master/APM-Final