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

Question

我有一个如下声明的组件，它接收输入数据。我正在使用 Primeng 日历组件，它创建的组件，但我无法访问数据以将其传递给模板我在 [(ngModel)]="data.DateValue" 上收到错误，好像在访问它时 DataValue 不存在

我缺少什么？

如何在接收到输入数据后设置一个日期类型的辅助值，如( 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 变量是否可用（不是 undefined 或 null）。

解决方案 3：

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

解决方案 4：

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

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

Angular 2+ access @Input Data.Property with [(ngModel)]

angular

components

primeng