在Input（）上绑定Angular 5调用函数

Question

很抱歉，标题令人困惑，不确定如何措辞。我正在尝试调用一个函数来获取数据并将其传递给子组件。

parent.component.ts ：

getData(arg: string[]) {
    let data: any[];

    // Do stuff here to get data

    return data;
}

parent.component.html ：

<app-child [myData]="getData(['test'])"></app-child>

child.component.ts

export class ChildComponent {

    @Input() myData: any[];

    // Stuff here
}

child.component.html

<h3>{{ myData[0].test }}</h3>

但是，当我运行该应用程序时，出现一个错误，提示它为Cannot read property '0' of undefined。我究竟做错了什么？我不想创建一个绑定到[myData]的变量，因为那时我会有很多。我还将在其他地方使用此功能。

任何帮助将不胜感激，谢谢！

Answer 1

您的函数参数不应与[]一起使用，请将其更改为

<app-child [myData]="getData('test')"></app-child>

并在孩子身上使用安全的导航操作符，以确保数据不为空

<h3>{{ myData[0]?.test }}</h3>