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

Question

我有Json个对象

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

我想在模板中迭代这个对象，所以我使用管道帮助，因为没有直接的方法在 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 = "i want to sleep";

在模板中它仍然说我可以走路。我需要在这里做什么，以防模板和 ngFOr(Object) 像双向绑定一样工作。

Answer 1

在 angular 中，管道默认是纯的，这意味着它们仅运行如果对其输入进行了纯粹的更改。

如果您希望您的管道在每个更改检测周期都处于运行状态，您必须像这样在 impure 中进行设置：

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

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

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

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

您可以在 docs.

中找到有关 impure/pure 管道的更多详细信息

Answer 2

一个简单的解决方法是

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

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

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

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

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

Angular2/4 How to update template in *ngFor is working on [object,object]?

angular

ngfor

angular-pipe