Angular2/4 如何更新 *ngFor 中的模板正在处理 [object,object]？答案

【问题标题】：Angular2/4 How to update template in *ngFor is working on [object,object]?Angular2/4 如何更新 *ngFor 中的模板正在处理 [object,object]？
【发布时间】：2017-09-06 08:15:50
【问题描述】：

我有类似 Json 的对象

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

我想在模板中迭代这个对象，所以我使用管道帮助，因为在 Angular2/4 中没有直接的方法来迭代模板中的 obj

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(Object) 像两种方式绑定一样工作，我需要在这里做些什么。

【问题讨论】：

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

标签： angular ngfor angular-pipe

【解决方案1】：

默认情况下，角管道是纯的，这意味着它们只有在输入发生纯变化时才会运行。

如果您希望您的管道在每个更改检测周期中运行，您必须像这样在不纯中进行：

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

但请记住，这可能会对您的表现产生重大影响。

最好通过在修改对象时创建新引用来对输入执行“纯”更改，例如使用Object.assign：

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

您可以在docs 中找到有关 impure/pure 管道的更多详细信息。

【讨论】：

【解决方案2】：

一个简单的解决方法是

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

修改后增加counter。这避免了为每次修改创建一个新对象。

这是因为每次输入值更改（对象的对象引用）或传递给管道的参数之一时，Angular 都会调用管道。

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

【讨论】：