Angular2/4 如何在正在处理 [object,object] 的 *ngFor 中更新模板?
Angular2/4 How to update template in *ngFor is working on [object,object]?
我有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) 像双向绑定一样工作。
在 angular 中,管道默认是 纯的 ,这意味着它们仅 运行 如果对其输入进行了纯粹的更改。
如果您希望您的管道在每个更改检测周期都处于 运行 状态,您必须像这样在 impure 中进行设置:
@Pipe({
name: 'keyobject',
pure: false
})
但请记住,这会对您的表现产生重大影响。
最好在修改对象时通过创建新引用来对输入执行 "pure" 更改,例如使用 Object.assign
:
obj = Object.assign({}, obj, { TimSays: 'i want to sleep' });
您可以在 docs.
中找到有关 impure/pure 管道的更多详细信息
一个简单的解决方法是
<div *ngFor="let o of obj | keyobject:counter">{{o.value}}{{o.key}}</div>
修改后自增counter
。这避免了为每次修改创建一个新对象。
这是可行的,因为 Angular 每次输入值更改(对象的对象引用)或传递给管道的参数之一时都会调用管道。
尽管在应用程序的不同位置修改对象时,它会变得很麻烦。
我有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) 像双向绑定一样工作。
在 angular 中,管道默认是 纯的 ,这意味着它们仅 运行 如果对其输入进行了纯粹的更改。
如果您希望您的管道在每个更改检测周期都处于 运行 状态,您必须像这样在 impure 中进行设置:
@Pipe({
name: 'keyobject',
pure: false
})
但请记住,这会对您的表现产生重大影响。
最好在修改对象时通过创建新引用来对输入执行 "pure" 更改,例如使用 Object.assign
:
obj = Object.assign({}, obj, { TimSays: 'i want to sleep' });
您可以在 docs.
中找到有关 impure/pure 管道的更多详细信息一个简单的解决方法是
<div *ngFor="let o of obj | keyobject:counter">{{o.value}}{{o.key}}</div>
修改后自增counter
。这避免了为每次修改创建一个新对象。
这是可行的,因为 Angular 每次输入值更改(对象的对象引用)或传递给管道的参数之一时都会调用管道。
尽管在应用程序的不同位置修改对象时,它会变得很麻烦。