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

Question

警告：我是 angular 的新手，所以我可能误解了它的工作原理。

我有一个端点，我正在访问该端点以获取一些数据。我创建了一个模型，我认为我可以将响应直接映射到模型数组中。

但看起来它完全忽略了模型我取回了我的数据，但它是整个 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')
}

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

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);
    });
}

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

http subscribe not mapping data to model

ionic-framework

angular

angular-httpclient