如何在angular2中推送和更新深层嵌套值并保持ui状态 [英] How to push and update deep nested values in angular2 and maintain ui state

问题描述

我有一个嵌套很深的数组，如下所示

i have a deeply nested array as follow

mainarray[]:{
array1[]:{sub1_array1[]:{},sub2_array1:{}},
array2[]
... // and so on
}

由于我在init上检索主数组，我该如何推送sub2_array1更新的值?但由于在更改视图时，呈现器和ui状态已更改，包括一些活动的类组件.那我该如何维持呢?我阅读了有关 pipes 和 changedetectorRef 的内容，但不知道如何使用它?预先感谢.

since i am retriving main array on init how can i push sub2_array1 updated values? but since on change view renders and ui state is changed including some active class components. so how can i maintain that? i read something about pipes and changedetectorRef but can't figure out how to use it ? Thanks in advance.

推荐答案

您的数组/对象有很多错误.而 tsc 对此有所抱怨.请检查 https://stackoverflow.com/a/37824284/1267942

Something is very wrong with your array/object. And tsc complains about it. Please check https://stackoverflow.com/a/37824284/1267942

非常生动活泼，它与 pipes 和 changedetectorRef 无关，您只需要正确声明模型即可.

Very lively it's nothing to do do with pipes and changedetectorRef, you just need to declare your model correctly.

更新:这里有几件事:

1. 父子组件之间正确的交互方式https://angular.io/docs/ts/latest/cookbook/component-communication.html#

具有用于多个嵌套组件的通用数据模型:

Having common data model for multiple nested components:

在父组件中声明类成员，例如

Declare a class member in a parent component, like

model: Array<string> = [];

在模板中，使用双向绑定将其传递给子组件

In the template pass it to a child component using two-way binding

<child-component [(modelInChild)]="model"></child-component>

在子模型变量中应声明为

In the child model variable should be declared as

@Input() modelInChild: Array<string> = [];

然后您可以按照相同的方式将变量进一步传递给child的child.

Then you can pass the variable further to child of child the same way.

使用此方法，您将在整个组件树中拥有通用数据 model .但是，不建议使用此方法:它很慢，很难跟踪 model 的值，等等.

Using this method you'll have common data model in the whole tree of components. However, this method is not recommended: it's slow, it's hard to track value of a model, etc.

1. 组件可以将其自身用作子代.我还没有尝试过这种方法，但是 javascript中的Angular2递归模板看起来非常有前途.

对于 Collapsible 组件，请检查 查看全文