Angular 2+ access @Input Data.Property with [（ngModel）]

问题描述：

我有一个声明如下的组件，它接收一个Input数据。我正在使用Primeng日历组件，它创建的组件，但我无法访问数据以将其传递到模板我在[（ngModel）] =“data.DateValue”上收到错误，它是像DataValue在访问时不存在Angular 2+ access @Input Data.Property with [（ngModel）]

缺少什么？

如何在接收到输入数据后设置类型为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); 
    }  
}

我已经添加了父组件，我不认为这是正确的接收父母，因为我有其他组件数据如：value = {{data？.Value}}在模板上 –

这里有一些与[（ngModel）] =“data.DateValue”特别？ –

更正[（ngModel）] =“data.DateValue”实际上工作正常 –

答

的问题指出，因为它是。 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变量是否可用（未定义或为空）。

解决方案3：

你应该考虑使用数据解析，有助于装载组件之前加载数据。

解决方案4：

前

防止装载子组件的输入数据加载

我最终传递@Input（）dateValue：string;给孩子，它的工作。但我没有看到传递object.property或属性 –

之间的区别。它们彼此不同。如果使用@Input（）dateValue：string，它会很好地工作。但是，它不起作用，因为你给它一个像@Input（）data：any的输入。原因是：子组件示例组件的模板在输入数据传递给它之前被加载。所以，结果是： ** data **将被_assigned_定义为undefined。然后，您使用[（ngModel）] =“data.DataType”。它会抛出一个异常，因为* data *变量是未定义的 –

事实上，我的问题是我有一个动态组件工厂，它创建了我所有的组件，并且在将输入数据设置到组件之前调用了.detectChanges（）像那样工作，但现在设置数据，并在调用detectChanges（）后解决了我所有的问题。无论如何，这里的讨论让我想起了我的代码。需要做一些活塞来分享我的代码。 –

Angular 2+ access @Input Data.Property with [（ngModel）]

相关推荐