javascript - 无法读取 subview 的变量数据

Question

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

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

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

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调试器中可以看到的变量:

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

Answer 1

@Input Data ...装饰器从父组件“接收”数据。您可以通过父模板内的属性 [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

最好不要使用保留/过于通用的名称，例如数据、选项，以避免名称冲突以及驼峰式大小写。