関数を含むtypescriptクラスのjsonデータを取り込みます

Question

私は反応式を使用しており、データがフォームのコントロールにどのようにマップされているか理解していません。 IDと名前を持つオブジェクトコントロールの例を見てみましょう。このコントロールは、入力テキストボックスとしてレンダリングされ、ユーザーがIDを入力する必要があります。入力ボックスには[オブジェクトのオブジェクト]のように - これはオブジェクトではなく文字列で、以来、私はその後、リモートでオブジェクトを検索し、この

{ id: 1234, description: "Some description" } 

のように見えるデータと基礎となるオブジェクトを移入するためにオートコンプリート機能を使用していますその価値。私はこのオブジェクトが1234 - Some descriptionのような値を表示できるように、toStringメソッドを提供する必要があると仮定しています。ここ

はフォーム構成である：

this.orderForm = this.fb.group({ 
    customer: '', 
    .... 
    items: this.fb.array([ this.initItems() ]) 
    ... 

だからcustomerは、それらのオブジェクトの一つであり、他の同様の物体がitemオブジェクトです。

export class Customer { 
    id: string; 
    descr: string; 
    toString =() => this.id + " - " + this.descr 
} 

export class ItemDetail { 
    id: string; 
    descr: string; 
    toString =() => this.id + " - " + this.descr 
} 

export class Order { 
    id: string; 
    ... 
    customer: Customer; 
    items: Item[] 
} 

export class Item { 
    ... 
    detail: ItemDetail 
    ... 
} 

私は注文データを持っていたら、私はこのような形でそれをロードしています：

const itemsFGs = order.items.map(item => this.fb.group(item)); 
const itemsFA = this.fb.array(itemsFGs); 
this.orderForm.setControl('items', itemsFA); 

問題は、データがプレーンなオブジェクトとしてロードされ、適切にキャストタイプではないということですそのため、入力ボックスがtoStringメソッドを使用する代わりに[object Object]と表示されるネストされたオブジェクトのいずれにもtoStringメソッドがありません。ここで

はサンプル順序のためのJSONがどのように見えるかです：私はJSONとして入ってくるデータが適切なクラスでキャプチャされていることを確認することができますどのように、主な質問は

{ 
    id: "1", 
    customer: { 
    id: "1", 
    name: "some customer" 
    }, 
    items: [{ 
    detail: { 
     id: "1", 
     descr: "some item" 
    } 
    }] 
} 

ある

ようのtoStringのようなメソッド適切な表示が可能です。

Answer 1

重要：typescriptで複雑なオブジェクトタイプを作成する場合は、常にinterfaceを使用してください。

また

export interface Customer { 
    id: string; 
    descr: string; 
} 

あなたがサービスから来るのパラメータがわからないと、あなたは未定義のエラーが予想される場合、以下のコードを使用して、オプションとして、これらのプロパティを指定し、

export interface ItemDetail { 
    id: string; 
    name: string; 
    descr?: string; //optional 
} 

export interface Order { 
    id: string; 
    ... 
    customer: Customer; 
    items: Item[] 
} 
export interface Customer{ 
    id:string; 
    name: string; 
    address?: string; //optional 
    dob?: Date;  //optional 

}

ことでこれにより、オプションのパラメータが実際のオブジェクトにバインドされるのを避けることができます（応答に含まれていない場合）。これらのプロパティがサービス応答で利用可能な場合、期待どおりにバインドする方法。

アップデート1：

あなたはいいですね、私はそれを試してみるだろうが、インターフェイスには、あなたがメソッドを定義することはできませんし、私が指定したい

this.form = this.fb.group({ 
     firstName: ['', [Validators.required, Validators.minLength(3)]], 
     lastName: ['', [Validators.required, Validators.minLength(3)]], 
     customerGroup :this.fb.group({ 
       firstName: ['', [Validators.required, Validators.minLength(3)]], 
       lastName: ['', [Validators.required, Validators.minLength(3)]], 
     }, {validator: Validators.required}) 
     .... 
    });