Angular2/4如何更新* ngFor模板正在处理[object，object]？

我JSON对象像Angular2/4如何更新* ngFor模板正在处理[object，object]？

var obj = { 
    "TimSays":"I can Walk", 
    "RyanSays":"I can sing", 
    "MaxSays":"I can dance", 
    "SuperSays":"I can do it all" 
}

我要重复在模板这个对象，所以我用管的帮助，有迭代OBJ在模板中Angular2没有直接的方法/ 4

import { Injectable, Pipe } from '@angular/core'; 
@Pipe({ 
    name: 'keyobject' 
}) 
@Injectable() 
export class Keyobject { 

transform(value, args:string[]):any { 
    let keys = []; 
    for (let key in value) { 
     keys.push({key: key, value: value[key]}); 
    } 
    return keys; 
}}

模板代码

<div *ngFor="let o of obj | keyobject">{{o.value}}{{o.key}}</div>

在我的JavaScript如果我做的JSON对象动态变化的任何改变都没有得到反映在模板。

obj.TimSays =“我想睡觉”;

在模板中，它仍然说我可以走路。我需要在这里做什么，以便模板和ngfor（对象）像双向绑定一样工作。

来源

2017-09-06 Kunal Vashist

你应该改变它的内部字段后覆盖对象的实例。 – Pengyy

在角管中默认为纯，这意味着它们只在其输入发生纯粹变化时才会运行。

如果你想，你管你不得不在不纯这样每次变更检测周期运行：

@Pipe({ 
    name: 'keyobject', 
    pure: false 
})

但请记住，这可能对你的表现显著的影响。

倒不如通过创建一个新的参考对矫正的对象时使用Object.assign执行到输入一个“纯粹”的变化，例如：

obj = Object.assign({}, obj, { TimSays: 'i want to sleep' });

您可以找到有关不纯更多细节/ 纯管docs。

来源

2017-09-06 08:23:13 cyrix

一个简单的解决方法是

<div *ngFor="let o of obj | keyobject:counter">{{o.value}}{{o.key}}</div>

然后递增counter改性后。这避免了为每个修改创建一个新对象。

这是可行的，因为每当输入值发生变化（对象的对象引用）或传递给管道的其中一个参数时，Angular就会调用管道。

虽然在应用程序中的不同位置修改对象时，它会变得很麻烦。

来源

2017-09-06 08:29:54

Angular2/4如何更新* ngFor模板正在处理[object，object]？

回答

相关问题