如何使用 Observable 从文件中获取 json 数据

Question

在我使用这种方法之前，我正在练习从一个包含国家和州列表的 json 文件中读取数据，但是我想使用 httpClient 并且通过测试我有这些方法，但是正确的方法是什么读取此数据。 早期方法：

  getCountries(): Observable<Country[]> {
    return of(countries['countries']);
  }
  getStates(countryID): Observable<State[]> {
    return of(countries['states'].filter(f => f.countryId === countryID));
  }

这是我的工作方式：

  getC(): Observable<Country[]> {
    return this.http.get<Country[]>(this.link).pipe(map(k => {
      return k['countries'];
    }));
  }
  getS(CID): Observable<State[]> {
    return this.http.get<State[]>(this.link).pipe(map(v => {
      return v['states'].filter(f => f.countryId === CID);
    }));
  }

我看到这样的东西，但我有错误

  getC3(): Observable<Country[]> {
    return this.http.get<Country[]>(this.link)
      .toPromise()
      .then(res => <Country[]>res.countries)
      .then(data => {return data});
    }

这样做的正确方法是什么， 错误：

几天过去了，看来问题很严重，所以问这边，从这个json获取数据的方法是什么：

  [
    {
      "data": [
        {
           "label": "Select State",
           "value": null
        },
        {
          "label": "Adeje",
          "value": {
             "county": "Gran Canaria",
             "state": "Islas Canarias",
             "country": "España"
           }
        },
        {
          "label": "Agaete",
          "value": {
            "county": "Gran Canaria",
            "state": "Islas Canarias",
            "country": "España"
         }
       }
     ]
   }
 ]

以及如何从这个 json 中获取数据：

[
  {
    "label": "Select State",
    "value": null
  },
  {
    "label": "Adeje",
    "value": {
      "county": "Gran Canaria",
      "state": "Islas Canarias",
      "country": "España"
    }
  },
  {
    "label": "Agaete",
    "value": {
      "county": "Gran Canaria",
      "state": "Islas Canarias",
      "country": "España"
    }
  }
]

考虑到我使用--strict模式

Answer 1

解决问题的最简单方法是认识到使用 Angular 时的最佳做法是使用 Observables 而不是使用 Promises

问题

考虑代码

getC3(): Observable<Country[]> {
  return this.http.get<Country[]>(this.link)
    .toPromise()
    .then(res => <Country[]>res.countries)
    .then(data => {return data});
  }

return this.http.get<Country[]>(this.link) 将返回 Observable。如果您在Observable 上调用.toPromise()，则会返回Promise。因此，您将收到 Promise<Country[]> does not contain properties ... from type Observable<Country[]>

的错误

解决方案

解决这个问题的一种方法（更好的方法）是简单地将类型保持为 Observable。

getC3(): Observable<Country[]> { return this.http.get<Country[]>(this.link)}

下面不推荐，将返回类型改为promise

getC3(): Promise<Country[]> {
  return this.http.get<Country[]>(this.link)
    .toPromise()
    .then(res => <Country[]>res.countries)
    .then(data => {return data});
  }