Angular2：使用组件输入传递嵌套数组

Question

当对象由嵌套数组组成时，是否有更好的解决方案将复杂对象传递给子组件？

这是我的问题：在子组件中出现的部分 html 中，您必须像这样表示嵌套数组：{{animal.quadripeds[2].dogs[4].furColor}}

索引值是硬编码的。像这样看会更好，例如： animal.quadripeds.find(q => q.isDirty == true).dogs.find(d => d.isDirty == true).furColor. 很遗憾，您不能在 {{}}

中使用 .find()

这里有一个 plnkr 供您欣赏：Nested Arrays via Component Input

谢谢！

Answer 1

你不能在你的模板中使用find方法，但这并不意味着你不能在你的组件中使用它，例如：

import {Input, Component, OnInit} from 'angular2/core';

@Component(...)
export class ChildComponent implements OnInit {
    @Input() transport: Transport;

    private _valueToDisplay;

    ngOnInit() {
        this._valueToDisplay = animal.quadripeds
            .find(q => q.isDirty == true)
            .dogs.find(d => d.isDirty == true)
            .furColor;
    }

    get valueToDisplay() {
        return this._valueToDisplay;
    }
}

两件事：

请注意，我使用 OnInit 接口：这是因为您的输入属性尚未在您的构造函数中初始化（因此请注意在 [=13= 中实现您的初始化逻辑] 函数）。
当您的输入属性更新时，您可能必须处理相同的逻辑，您可以实现 ngOnChanges 函数（或使用 setter 作为您的输入属性).

这是您更新的 plunkr：http://plnkr.co/edit/BTzAfO6AGSLnOn8S1l24

请注意，正如@dfsq 所建议的那样，此逻辑可能应该放在服务中。

Angular2：使用组件输入传递嵌套数组

Angular 2: Using Component Input to Pass Nested Arrays

arrays

components

nested

input

angularjs