急!!!使用keys管道,在ngFor中不能动态循环出来

来源:5-7 管道

Niweisi

2017-07-18

obj4 = {
    test1:'2222'
};

onButton(){
    this.obj4['test'] = '11111';
    console.log(this.obj4);//这里已经打印出来了,在模版中ngFor并没有再次循环
}
<div *ngFor="let e of obj4 | keys ;">
    {{e.key}}
</div>
<button (click)="onButton()"></button>

keys管道代码

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
    name: 'keys'
})
export class KeysPipe implements PipeTransform {

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

}

这个管道我肯定没写错,在页面加载时ngFor能循环出来,使用click改变添加对象时就不行了,经过测试,应该是ngFor会自动检查被循环的数组,因为obj4是对象使用了keys管道,所以无法检查obj4的变化,就没有再次循环。不知道怎么解决

请指点!!!

写回答

1回答

Willman4217423

2017-07-20

 NgFor only supports binding to Iterables such as Arrays.

ngFor指令只能用于数组

0
0

Angular4.0从入门到实战 打造股票管理网站

Angular新特性,教你熟练使用 Angular 和 Typescript 开发组件式单页应用

2683 学习 · 1361 问题

查看课程