Question

我正在将数组数据从父组件传递到子组件，并且遇到以下情况：

parent.component.html：

<child-component
     ...
    [options]="students"
>
</child-component>

状态I：在定义数组时，一切正常，我可以在子组件上获取数组值。

parent.component.ts：

export class ParentComponent implements OnInit {

    students: any[] = [
        { name: "Mary" },
        { name: "Marta" },
        { name: "Kelly" },
        { name: "John" },
        { name: "Shelley" },
        { name: "Frankstein" },
        { name: "Shierley" },
        { name: "Igor" }
    ];
}

child.component.ts：

export class ChildComponent implements OnInit {

    @Input() options: any[]= [];
}

状态II：但是，当我将数组设置为方法而不是定义时，输入值将为null。为什么要在方法中填充数组是因为我通过从服务器检索数据来填充它。因此，我在这个问题上苦苦挣扎，最终发现该问题与异步数据无关。与这个定义地方有关。那么，如何执行可以通过其数组值传递的数据呢？

parent.component.ts：

export class ParentComponent implements OnInit {

    students: any[] = [];



ngOnInit() {
  this.getStudents();
}

getStudents() {
    this.students = [
        { name: "Mary" },
        { name: "Marta" },
        { name: "Kelly" },
        { name: "John" },
        { name: "Shelley" },
        { name: "Frankstein" },
        { name: "Shierley" },
        { name: "Igor" }
    ];
}

注意： 我认为在定义null时给学生分配空值。但是，否则会引发错误，并且我在child上遇到空值异常。也许与lifcel-ycle有关的问题，但我已经尝试过ngOnchanges，ngAfterViewInit等。

Answer 1

如果您不直接分配传递给子组件的对象，则由于您将空数组分配给students变量，最初输入将收到未定义或空数组。

为避免这种情况，请对ngIf使用条件渲染：

<child-component
     *ngIf="students && students.length > 0"
    [options]="students"
>
</child-component>

如果未按定义初始化数据，则无法将数据传递给子级

1 个答案: