Angular 2：使用组件输入传递嵌套数组答案

【问题标题】：Angular 2: Using Component Input to Pass Nested ArraysAngular 2：使用组件输入传递嵌套数组
【发布时间】：2016-07-12 22:25:46
【问题描述】：

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

这是我的问题：在子组件中出现的部分 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

谢谢！

【问题讨论】：

只是将此搜索委托给控制器？无论如何，在模板中做的不是很可读。
将其委托给服务而不是 @dfsq 控制器不适用于业务逻辑

标签： arrays angularjs input nested components

【解决方案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 接口：这是因为您的输入属性尚未在您的构造函数中初始化（因此请注意在ngOnInit 函数中实现您的初始化逻辑）。
您可能必须在更新输入属性时处理相同的逻辑，您可以实现 ngOnChanges 函数（或为您的输入属性使用 setter）。

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

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

【讨论】：

Mickael，感谢 ngOnChanges 提示！就您而言，实施它可能具有更大的灵活性。我还没有在更新场景中尝试过，但是当您最初渲染子组件的视图时它确实可以工作。