数据更新时管道不运行

时间:2016-02-14 18:24:28

标签: typescript angular

我希望当其中一个用户更改其名称时,让用户列表自动更新名称。

当我使用{{user.profile.name}}时,效果很好。但是,当我使用UserNamePipe时,它不起作用。

我也做了一个小例子(包括async管道方式)来测试,但这个例子运行良好。 http://plnkr.co/edit/RtxMgDBd3lLeUHU2M3n6?p=preview

那么我的问题是什么?感谢

// app.ts

import {Component, View} from 'angular2/core';
import {UserNamePipe} from './user-name.pipe';
@View({
    pipes: [UserNamePipe],
    template: `
        <div class="row">
            <a *ngFor="#user of users">
                {{user.profile.name}}  <!--this changes automatically when the other use change his name-->
                {{user|userName}}  <!--this has problem which won't update automatically-->
            </a>
        </div>
    `
})
export class AppComponent {
    users:any;
    ngOnInit()
    {
        this.users = getFromDatabase();
    }
}

// user-name.pipe.ts

import {Pipe} from 'angular2/core';
@Pipe({
    name: 'userName'
})
export class UserNamePipe {
    transform(user:any):string {
        console.log("UserNamePipe runs"); // This actually didn't run when the other user changes his name
        return user.profile.name;
    }
}

1 个答案:

答案 0 :(得分:1)

{{user.profile.name}}

Angular检查.name是否已更改

{{user|userName}}

仅在user更改时进行评估。