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

问题是指出的。 id变量未定义。您应该阅读有关Lifecycle Hooks的更多信息。

虽然您的子组件（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

解决方案是您必须在加载后绑定数据。

解决方案1：

初始化data Object。给它一个默认值。

解决方案2：

[（ngModel）] = “数据？.DateValue”。这是为了检查theData.DataType变量是否可用（未定义或为空）。

解决方案3：

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

解决方案4：

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

Angular 2+使用[（ngModel）]

1 个答案: