Angular 2+ 使用 [(ngModel)] 访问 @Input Data.Property

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 变量未定义。 您应该阅读有关生命周期挂钩的更多信息。

虽然您的子组件 (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)]="data?.DateValue"。这是为了检查data 变量是否可用（不是未定义或为空）。

解决方案 3：

您应该考虑使用有助于在加载组件之前加载数据的数据解析器。

解决方案 4：

防止在加载其输入数据之前加载子组件