无法读取子视图

的可变数据我有一个组件MyComponent并声明如下：无法读取子视图

export class MyComponent implements IComponent { 
    ... 
    @Input() Departments: any;  
    @Input() DropDownOptions: any;  
    @Input() Data: any[]; 
    ... 
}

然而，没有物业Data，当我尝试从PersonComponent组件来访问。

HTML PersonComponent组件：可以在Chrome浏览器的调试器可以看到

export class PersonComponent implements OnInit {  
    @ViewChild('myGrid') myGridComponent: MyComponent; 

    ngAfterViewInit() { 
     debugger;   
     let localData2 = this.myGridComponent.Data; // NO DATA PROPERTY. Undefined 

    } 

    ngAfterContentInit() { 
     debugger;   
     let localData1 = this.myGridComponent.Data; // NO DATA PROPERTY. Undefined  
    } 

}

变量：

<fieldset> 
    <my-comp #myGrid [Options]="ps.Options['myGrid']"></my-comp> 
</fieldset>

打字稿PersonComponent组件的

我怎样才能读取值为DataMyComponent的财产？我究竟做错了什么？

来源

2017-08-15 StepUp

您的'@Input（）Data'是一个Input-decorator，因此您需要将数据提供给您的组件。 'my-comp #myGrid [Options] =“ps.Options ['gridShipmentHeaders']”[Data] =“someData”>' – John

数据未定义 – Milad

@Input Data ...装饰器“接收”来自父组件的数据。您可以通过父模板中的[Data]属性进行设置。如果你没有设置它，它将是不确定的。另一方面，你有[Options]属性在子项中没有相应的@Input。

可以修复它像这样：

<fieldset> 
    <my-comp #myGrid [Data]="person.data"></my-comp> 
</fieldset>

其中人是在父组件与数据字段的阵列。

请阅读若有所思的机制的文档https://angular.io/guide/template-syntax#inputs-outputs和https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding

那将是最好不要使用像数据，选项保留/过于笼统的名称，以避免名称冲突，也骆驼他们。

来源

2017-08-15 11:53:06 Vega

换句话说我应该从'PersonComponent'发送数据到'MyComp '在'PersonComponent'处获取[Data]属性？ – StepUp

从你的代码逻辑：是的。但它可能是从服务等取得的。但在这种情况下，您不需要@Input – Vega

@Input用于您的情况下的父级子通信 – Vega

无法读取子视图

回答

相关问题