使用服务从 JSON 读取特定密钥

Question

我是所有 JavaScript 和 Angular 的新手。所以我正在努力做到以下几点： 我有以下服务，从本地 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)}

如何将上述对象/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:[{}]
  }]
}

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

Answer 1

通常，您的服务应该只返回 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);
  }

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

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