角2+アクセス@Input Data.Property with [（ngModel）]

Question

以下のように宣言されたコンポーネントがあり、入力データを受け取ります。私はPrimengカレンダーコンポーネントを使用していますが、 コンポーネントが作成されましたが、テンプレートに渡すデータにアクセスできません。 [（ngModel）] = "data.DateValue"にエラーが表示されます。 DataValueのようなものは既にそれにアクセスするときに存在しません

何が欠けていますか？

入力データを受け取った後に、タイプDateの（myDateValue：Date）のような補助値を設定する方法はありますか？

ありがとうございます。

import { Component, Input} from '@angular/core'; 
import { DataType } from "../model/dataType"; 

@Component({ 
    selector: 'exempleComponent', 
    template: '<p-calendar *ngIf="data" [(ngModel)]="data.DateValue" dateFormat="dd.mm.yy"></p-calendar>' 

}) 
export class ExempleComponent { 

    @Input() data: DataType; 

    constructor() { } 


} 

親コンポーネント：それはあるよう

import { Component, OnInit } from '@angular/core'; 
import { WebService } from './app.service'; 
import { MasterDataType } from "../model/masterDataType"; 

@Component({ 
    selector: 'my-app', 
    template: '<div> <exempleComponent [data]="theData.DataType" ><exempleComponent/> </div>', 
    providers: [WebService] 

}) 
export class AppComponent implements OnInit { 
    errorMessage: string; 
    theData: MasterDataType; 

    constructor(private dataService: WebService) {} 

    ngOnInit() { this.getDataFromService(); } 
    getDataFromService() { 
     this.dataService.getData() 
      .subscribe(
      myData => this.theData = myData, 
      error => this.errorMessage = <any>error); 
    }  
} 

Answer 1

の問題が指摘されています。 data変数は未定義です。 Lifecycle Hooksの詳細を読む必要があります。あなたの子コンポーネント（ExempleComponent）が、

はngAfterContentInit時にロードされますが、あなたのサービスの呼び出しが完了（またはサブスクライブ）されていないためtheData変数は、この時期ではまだ定義されていません。例えば

：

data: SomeType; 
 
ngOnInit() { 
 
    console.log('START ngOnInit'); 
 
    this.service.getData().subscribe(_data => { 
 
    this.data = _data; 
 
    console.log('data', this.data); 
 
    }); 
 
    console.log('END ngOnInit'); 
 
}

上記のコードの結果は：

START ngOnInit

END ngOnInit

data Object

解決策は、読み込まれた後にデータをバインドする必要があることです。

解決方法1：

はtheData.DataTypeを初期化します。デフォルト値を指定します。

解決策2：

[（ngModel）] = "データ.DateValue？"。これは、data変数が使用可能かどうかを確認するためです（未定義またはnullではありません）。

解決策3：

あなたは、コンポーネントをロードする前にデータをロードするために役立つデータリゾルバを使用して検討すべきです。

解決策4：

その入力データが