Question

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

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

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

中使用.find（）

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

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

请注意，正如@dfsq所建议的那样，这个逻辑应该可以用于服务。

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

1 个答案: