无法读取子视图的可变数据

Question

我有一个组件MyComponent，它的声明如下：

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

但是，当我尝试从Data组件进行访问时，没有属性PersonComponent。

PersonComponent组件的HTML：

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

PersonComponent组件的TypeScript：

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       
    }

}

可在Chrome调试器中看到的变量：

如何阅读Data MyComponent属性的值？我做错了什么？

Answer 1

@Input Data ... decorator“从父组件接收”数据。您可以通过父模板中的[Data]属性进行设置。如果你没有设置它将是未定义的。另一方面，你有[Options]属性，在子节点中没有相应的@Input。

你可以这样解决它：

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

其中person是父组件中包含数据字段的数组。

请仔细阅读文档https://angular.io/guide/template-syntax#inputs-outputs和https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding

最好不要使用保留/过于通用的名称，例如Data，Options来避免名称冲突，也可以使用camel case。