尝试将计算属性添加到来自 Angular 控制器的结果集 [英] Trying to add a computed property to a result set from a controller in Angular

问题描述

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

I'm using Angular 8 and am trying to do something that seems like it should be really simple.

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

I'm retrieving an array of records from my controller on the server using http.get. Those records have a particular type (defined within Angular) and I would like to add a computed property to that type called "meetsTarget". My problem is that it is not recognising that that property exists on the results I get back from the server.

问题 2:因为该属性是根据其他属性计算的，所以我还希望在其他属性更改时更新它(并且这些更新会自动在 html 中获取).

Question 2: Becasue that property is computed from other properties, I would also like it to be updated (and those updates be automatically picked up in the html) when those other properties change.

这是我的组件:

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"的计算属性.

My problem with the above code is that when I log this.data to the console, I can see all the results from the server but it doesn't show my computed property called "meetsTarget".

KPIEntry(连同我的计算属性meetsTarget")在 globals.ts 中定义:

KPIEntry (along with my computed property "meetsTarget") is defined in 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);
    }
  }
}

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

As you can see, meetsTarget is a readonly property that depends on kpiComparisonType, ytd and targetYTD. It will be possible to change both ytd and targetYTD using the component above and so the result for meetsTarget should be something that is dynamically updated if either of those values change.

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

My first problem though is that I cannot even get "meetsTarget" to be recognised as a property of the records in my result set.

我会感谢任何能够为我指明正确方向的人.

I'd appreciate anyone who can point me in the right direction.

谢谢！

推荐答案

this.http.get<KPIEntry[]>

这告诉 TypeScript:相信我，这个调用将返回一个 Observable.

This tells TypeScript: trust me, this call will return an Observable<KPIEntry[]>.

它没有告诉:请从服务器获取 JSON 并将其解析为 KPIEntry 数组.

It does not tell: please, take the JSON from the server and parse it to an array of KPIEntry.

HttpClient 对它获得的 JSON 响应体所做的事情非常简单:它调用 JSON.parse().解析 JSON 永远不会产生您的类的实例.JSON 解析器不知道您的类存在并且不关心它.它只是创建与 JSON 具有相同结构的普通 JavaScript 对象.

What the HttpClient does with the JSON response body it gets is extremely simple: it calls JSON.parse(). Parsing JSON will never, ever produce an instance of your class. The JSON parser doesn't know that your class exists and doesn't care about it. It simply creates plain old JavaScript objects which have the same structure as the JSON.

所以当你这样做

this.http.get<KPIEntry[]>

你只是在对编译器和你自己撒谎.

you're only lying to the compiler and to yourself.

如果您想拥有 KPIEntry 的实例，则需要通过调用类构造函数来创建它们.因此，您需要将 observable 实际发出的数组中的每个 POJO 转换为 KPIEntry 的实例.

If you want to have instances of KPIEntry, you need to create them, by calling the class constructor. So you need to transform every POJO in the array actually emitted by the observable into an instance of KPIEntry.

这篇关于尝试将计算属性添加到来自 Angular 控制器的结果集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！