时间戳

首页 > 解决方案 > Input() Bind 上的 Angular 5 调用函数

angular - Input() Bind 上的 Angular 5 调用函数

问题描述

对不起，如果标题令人困惑，不知道如何措辞。我正在尝试调用一个函数来获取数据并将其传递给子组件。

父组件.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]因为那样我会拥有很多变量。我也会在其他地方使用这个功能。

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

标签： angularinputdata-bindingangular5

解决方案

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

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

并在孩子上使用安全导航运算符以确保数据不为空

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

推荐阅读