Angular 6 HttpClient JSON 对 myObject 的响应答案

【问题标题】：Angular 6 HttpClient JSON response to myObjectAngular 6 HttpClient JSON 对 myObject 的响应
【发布时间】：2018-11-15 04:12:14
【问题描述】：

我有一个 API，它在使用 GET 查询时返回一个对象数组。 API 的响应格式为：

[
    {
        "Ident": "Ag",
        "Description": "Argent"
    },
    {
        "Ident": "As",
        "Description": "Arsenic"
    }
]

在我的应用程序中，我有一个具有以下结构的 Element 对象：

export class Element {
    public ident: string;
    public description: string;

    constructor(ident: string, description: string) {
        this.ident = ident;
        this.description = description;
    }
}

我的应用程序还有一个名为 mrcService 的服务，它带有一个名为 getElements() 的函数，它将使用 HttpClient 发送一个 GET 请求并返回一个 Observable 对象数组元素：

getElements(): Observable<Element[]> {
  return this.http.get<Element[]>(this.apiUrl)
    .pipe(
      catchError(this.handleError('getElements', []))
    );
}

最后，我在 ngOnInit() {} 中有一个订阅此服务的组件，它获取 API 返回的数组的每个元素并将它们推送到数组中：

elements: Array<Element> = [];
ngOnInit() {
    this.mrcService.getElements()
      .subscribe(res => {
        res.forEach(item => {
          this.elements.push(new Element(item.Ident, item.Description));
        });
        console.log(this.elements[0]); // returns the object at the index
      });
    console.log(this.elements[0]); // returns undefined
  }

我现在面临两个问题：

推送到我的数组时，必须根据 API 响应的命名法来引用可观察的属性。我想使用 ident 和 * description* 而不像我的对象定义中的大写字母，而不是 API 响应中的大写字母。
我不能在 .subscribe 之外使用 this.elements[i]。当我执行 console.log(this.elements[i] 时，它说未定义，但是当我执行 console.log(this.elements) 时，我可以看到数组。

【问题讨论】：

1.不确定后端的服务代码，但如果不是自动的，则需要设置返回结果时将属性名称解析为 camelCase。 2. 在订阅方法之外的console.log(this.elements[0]) 的特定情况下，this.elements 数组尚未填充，这就是它未定义的原因。

标签： angular angular6

【解决方案1】：

推送到我的数组时，必须引用可观察的属性根据 API 响应的命名法。我想使用不带大写字母的 ident 和 * description*，如我的对象定义而不是 API 中的大写字母回应

如果您无权访问 API，但仍希望以这种方式使用它，则可以使用 observable map 运算符对其进行修改，以将对象属性键更改为您想要的方式。

我不能在 .subscribe 之外使用 this.elements[i]。当我做 console.log(this.elements[i] 它说未定义，但是当我这样做时 console.log(this.elements) 可以看到数组的结构。

请记住，observables 是异步的，因此当您在订阅之外执行 console.log 时，您的 http 请求尚未完成。

【讨论】：

我完全没有考虑订阅方法的异步性。