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

Question

caveat：我是Angle的新手，所以我可能误会了它的工作原理。

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

，但是看起来它完全忽略了模型，但是我得到了我的数据，但这是整个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

调用API时，您将获取所有数据。您需要做的只是使用所需的数据（在本例中为描述）。 RxJS提供了map运算符，您可以使用该运算符以所需的格式转换数据：

以下是使用RxJS映射运算符转换数据的方法：

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

Answer 2

当你说

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

您是说data是Fault[]类型，只有在编译时才会检查，因此如果尝试在{内进行data.status例如{1}}。 在运行时，将按原样打印数据。

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

subscribe()

Answer 3

代码或行为没有错。它完成了预期的工作。该模型只是打字稿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);
    });
}