尝试将计算的 属性 添加到 Angular 中控制器的结果集中

Question

我正在使用 Angular 8 并且正在尝试做一些看起来应该非常简单的事情。

我正在使用 http.get 从服务器上的控制器检索记录数组。这些记录具有特定类型（在 Angular 中定义），我想向该类型添加一个计算 属性，称为 "meetsTarget"。我的问题是它没有识别出 属性 存在于我从服务器返回的结果中。

问题二： 因为 属性 是根据其他属性计算得出的，所以我也希望在其他属性发生变化时对其进行更新（并且这些更新会在 html 中自动获取）。

这是我的组件：

import { Component, Inject } from '@angular/core';
import { Location } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from "@angular/router";
import { Globals, KPIEntry } from './../../globals';

@Component({
  selector: 'app-enter-toller',
  templateUrl: './enter-toller.component.html',
  styleUrls: ['./enter-toller.component.css']
})
export class EnterTollerComponent {
  public data: KPIEntry[];

  constructor(private route: ActivatedRoute, private http: HttpClient, @Inject('BASE_URL') private baseURL: string, private gl: Globals, private location: Location) {
    // get results from the server
    this.http.get<KPIEntry[]>(this.baseURL + 'api/KPIEntry/ListTollerKPI/1').subscribe(result => {
      this.data = result;
      console.log(this.data);
    }, error => console.error(error));
  } 
}

上面代码的问题是，当我将 this.data 登录到控制台时，我可以看到来自服务器的所有结果，但它没有显示我计算的 属性 调用 "meetsTarget".

KPIEntry（以及我计算的 属性 "meetsTarget"）在 globals.ts:

中定义

export class KPIEntry {
  id: number;
  kpiName: string;
  mtd: number;
  ytd: number;
  targetYTD: number;
  kpiComparisonType: string;

  get meetsTarget(): boolean {
    if (this.kpiComparisonType == "gteq") {
      return (this.ytd >= this.targetYTD);
    }
    if (this.kpiComparisonType == "lteq") {
      return (this.ytd <= this.targetYTD);
    }
  }
}

如您所见，meetsTarget 是一个只读 属性，它取决于 kpiComparisonType、ytd 和 targetYTD。可以使用上面的组件更改 ytd 和 targetYTD，因此 meetsTarget 的结果应该是在这些值中的任何一个发生变化时动态更新的结果。

但我的第一个问题是，我什至无法将 "meetsTarget" 识别为结果集中记录的 属性。

如果有人能为我指明正确的方向，我将不胜感激。

谢谢！

Answer 1

this.http.get<KPIEntry[]>

这告诉 TypeScript：相信我，这个调用将 return 一个 Observable<KPIEntry[]>。

它不是 告诉：请从服务器获取 JSON 并将其解析为 KPIEntry.

的数组

HttpClient 对它获得的 JSON 响应主体所做的事情非常简单：它调用 JSON.parse()。解析 JSON 永远不会生成您的 class 的实例。 JSON 解析器不知道您的 class 存在并且不关心它。它只是创建与 JSON.

具有相同结构的普通旧 JavaScript 对象

所以当你这样做时

this.http.get<KPIEntry[]>

你只是在欺骗编译器和你自己。

如果您想要 KPIEntry 的实例，您需要通过调用 class 构造函数来创建它们。因此，您需要将可观察对象实际发出的数组中的每个 POJO 转换为 KPIEntry.

的实例