尝试从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);
    }
  }
}

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

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<KPIEntry[]>.

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的实例，则需要通过调用类构造函数来创建它们.因此，您需要将可观察对象实际发出的数组中的每个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屋！