首页 文章

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

提问于
浏览 次
0

我有Json Object之类的

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（对象）像双向绑定一样工作 .

angular ngfor angular-pipe

2 回答

  • 0

    在角度管道中默认为 pure ，这意味着它们仅在输入's a pure change to it'时运行 .

    如果您希望管道在每个更改检测周期运行，您必须在 impure 中进行如下操作：

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

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

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

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

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

    回复于
  • 3

    一个简单的解决方法是

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

    然后在修改后增加 counter . 这样可以避免为每个修改创建一个新对象 .

    这是因为每当输入值改变（对象的对象引用）或传递给管道的参数之一时，Angular就会调用管道 .

    但是，当在应用程序中的不同位置修改对象时，它可能会变得很麻烦 .

    回复于

相关问题