ng2-smart-table: Table do not update after load data

Hi all,

I have a problem when try to load data from API to the table, the table do not update unless I click on the filter box and click out.

Template <ng2-smart-table [settings]="settings" [source]="pages"></ng2-smart-table>

Typescript

export class PageListComponent {
    pages: LocalDataSource;

    settings = {
        columns: {
            id: {
                title: 'ID'
            },
            title: {
                title: 'Title'
            },
            edit_link: {
                title: 'Action'
            }
        },
        pager: {
            display: true,
            perPage: 10
        }
    };

    constructor(private pageSerice:PageService) {
        this.pages = new LocalDataSource();

        pageSerice.getAllPage().toPromise().then(data => {
            this.pages.load(data);
            this.pages.reset();
        });
    }
}

Service

getAllPage() {
        //noinspection TypeScriptUnresolvedFunction
        return this.http.get(window.location.origin + "/api/page").map(res => res.json());
}

Please help me solve this problem. Thank you so much.