找不到属性angular2和打字稿

Question

I have an api that returns me a json , and I cast the response to my class this works fine. But the json doesnt contains some varibales in the class and I expect those variables to be initialed with null if its not being set. But they dont appear at all(they disappear) and i get an exception that they are not there whiles they should be there. Pls an explanation on why this is happening would be very satisfying.

export class CustomPurchaseOrderProduct {
  constructor(
    public productId: number,
    public productName: string,
    public warehouseName: string,
    public binLocationCode: string,
    public amountInStock: number,
    public sellingPrice: number,
    public productTaxRate: number,
    public calculatedTax: number,
    public unitPrice: number,
    public discount: number
  ) {}
}

  getCustomProductOrders() {
const url = `${this.localUrl}purchaseOrderProducts`;
return this.http.get(url)
  .map(response => <CustomPurchaseOrderProduct[]>response.json());

}

  getAllPurchaseOrderProducts() {
this.purchaseOrderService.getCustomProductOrders()
    .subscribe(
      response => this.customPurchaseOrderProducts = response
    );

}

console.log('This is form Object', this.customPurchaseOrderProducts[index].calculatedTax);

JSON Object from array

{
"productId": 8,
"productName": "Akomka ",
"warehouseName": null,
"binLocationCode": null,
"amountInStock": 0,
"sellingPrice": 0,
"productTaxRate": 10,
"unitPrice": 0

}

So I am expecting my CalculatedTax ,UnitPrice and Discount to be null but they are not there when I console log the object

The calculatedTax and other variables are just not in the object when I console log them.

Answer 1

By doing this:

.map(response => <CustomPurchaseOrderProduct[]>response.json());

you are just telling compiler that you know the shape of the data and that you are sure it matches your class. If you console log the response you can see that it's a plain POJO and will console log Object {...} , so it's really not an instance of your class.

If you truly want it to be an instance of your class and have properties that potentially are not there, you can as mentioned in comments have them as optional properties. And if the property does not exist, then assign the null value. So your shortened class:

export class CustomPurchaseOrderProduct {
  private productId: number;
  private productName: string;
  private calculatedTax?: number;

  constructor(
    productId: number,
    productName: string,
    calculatedTax?: number

) {
    this.productId = productId;
    this.productName = productName;
    this.calculatedTax = calculatedTax || null
  }
}

So above we are marking calculatedTax as optional, and if it's not present in response, we assign null to the property. Please notice that you need to mark the optional properties as last in the constructor.

Then in the http-request you need to create the incoming data as an instances of your class, so you would need to do:

getCustomProductOrders() {
  const url = `${this.localUrl}purchaseOrderProducts`;
  return this.http.get(url)
   .map(response => <CustomPurchaseOrderProduct[]>response.json()
     .map(data => 
      new CustomPurchaseOrderProduct(data.productId, data.productName, data.calculatedTax)
     )
   )
}

Using classes vs Interfaces is an debatable issue, some prefer interfaces, some classes. So you could also use interfaces instead, but that alone will not solve the issue though. Solving this could be done also when you are getting response, iterate the data and check if property exists in object, if not, then assign it with null . But above is solution is with using class :)