http订阅不将数据映射到模型

Question

警告：我是角色的新手，所以我可能误解了它应该如何工作。

我有一个端点，我想要获取一些数据。我创建了一个模型，我想我可以将响应直接映射到一组模型中。

但看起来它完全忽略了模型我得到了我的数据，但它是整个JSON数据响应。不仅仅是模型中的匹配字段。

这是我的服务代码

getFaults() {
   return this.http.get<Fault[]>('<SITE>/api/faults')
}

这是我的模特

export interface Fault {
description: string
  }

这是我在page.ts中调用的代码

export class Tab1Page {
  constructor(public faultsService: FaultsService) {}

  faults: Fault[];

  getFaults() {
    console.log("click");
    this.faultsService
      .getFaults()
      .subscribe((data: Fault[]) => console.log(data));
  }
}

输出到控制台看起来像这样，我期待它将是一个故障模型数组，只是描述了映射。我错过了什么吗？

Answer 1

代码或行为没有任何问题。它做到了预期。该模型只是打字稿interface。它在这里做的只是类型检查：

getFaults() {
  return this.http.get<Fault[]>('<SITE>/api/faults')
}

要从数组description项中获取特定属性data，您需要遍历它并获取这些属性：

getFaults() {
  console.log("click");
  this.faultsService
    .getFaults()
    .subscribe((data: Fault[]) => {
      const descriptions = data.map(obj => {
        return { description: obj.description }
      });
      console.log(descriptions);
    });
}

Answer 2

当您调用API时，您将获得所有数据。您需要做的就是使用您需要的数据，在本例中说明。 RxJS提供了map运算符，您可以使用它来以您想要的格式转换数据：

以下是如何使用RxJS地图运算符转换数据：

  getFaults() {
        console.log("click");
        this.faultsService
          .getFaults().map((data: any) => data.description)
          .subscribe((data: Fault[]) => console.log(data));
      }

Answer 3

当你这么说的时候

.subscribe((data: Fault[]) => console.log(data));

你说data是Fault[]类型，这只会在编译时检查，所以如果你试图在data.status里面做subscribe()你会得到一个错误。在运行时，数据将按原样打印。

如果您只想记录Fault.description，则必须遍历您的数组。

getFaults() {
  console.log("click");
  this.faultsService
    .getFaults()
    .subscribe(data => {
       let faults = Fault[];
       data.forEach(object => {
          faults.push({description: object.description})
       });
       console.log(faults);
    });
}