Angular TypeError：object.object []。メソッドを呼び出そうとしたときに関数ではありません。

Question

オブジェクト4のobject.object []メソッドのメソッドを呼び出そうとしたときに、次のエラーが表示されます：

OrderComponent.html:30 ERROR TypeError: item.increaseQuantity is not a function at OrderComponent.increaseQuantity (order.component.ts:87)

私が持っているタイスクリプトコードは以下のとおりです。 OrderComponent.IncreaseQuantity（itemLoc：number）メソッドを呼び出すと、メソッド内でthis.orderItems [itemLoc] .increaseQuantity（）メソッドを呼び出そうとすると、上記のエラーが生成されます。それはOrderItem.increaseQuantity方法を知らない私はなぜ知らない：

import { Component, Inject } from '@angular/core'; 
import { Http } from '@angular/http'; 

class OrderItem { 
    id: number; 
    name: string; 
    unitPrice: number; 
    quantity: number; 
    amount: number; 
    comment: string; 

    increaseQuantity(): boolean { 
     console.log("In the Order Item itself - worked."); 
     this.quantity += 1; 
     this.amount = this.quantity * this.unitPrice; 
     return false; 
    } 
} 

class Order { 
    id: number; 
    createdTime: Date; 
    orderType: string; 
    tableName: string; 
    orderItems: OrderItem[]; 
} 

@Component({ 
    selector: 'order', 
    templateUrl: './order.component.html' 
}) 
export class OrderComponent { 
    public order: Order; 
    public total: number = 0; 


    constructor(http: Http, @Inject('ORIGIN_URL') originUrl: string) { 
     http.get(originUrl + '/api/Order/2').subscribe(result => { 
      this.order = result.json() as Order; 
      this.updateTotal(); 
     }); 

    } 

    updateTotal(): void { 
     this.total = 0; 
     //console.log("all: " + JSON.stringify(this.order.orderItems)); 
     this.order.orderItems.forEach(s => this.total += s.amount); 
    } 

    increaseQuantity(itemLoc: number): boolean { 
     //item.increaseQuantity(); 
     let item = this.order.orderItems[itemLoc] as OrderItem; 

     console.log("This increaseQuantity work." + JSON.stringify(item)); 

     return item.increaseQuantity(); 
     //return false; 
    } 

} 

Answer 1

あなたはどのOrderまたはOrderItemインスタンスをインスタンス化することはありません。あなたは純粋なデータオブジェクト（JSONから解析、すなわち1）上のあなたのメソッドを呼び出すに終わるのでちょうど

this.order = result.json() as Order 

または

let item = this.order.orderItems[itemLoc] as OrderItem; 

を行うと、自動的に作成され、それらのインスタンスにはなりません。これらのオブジェクトには、定義されているインスタンスメソッドメソッドがありません。その結果、エラーが表示されます。

代わりにあなたのような何かをする必要があると思います：ユーティリティ機能の

const orderData = result.json(); 

const order = new Order(); 
order.id = orderData.id; 
// ... assign rest of properties 
order.items = orderData.orderItems.map(orderItemData => { 
    const orderItem = new OrderItem(); 
    orderItem.id = orderItemData.id; 
    // ... assign rest of properties 

    return orderItem; 
}); 

this.order = order; 

クリエイティブ使用し、コンストラクタおよびインタフェースは、上記より簡潔レンダリングするために使用することができますが、本質的に、これは必要なものです。