如何在Angular组件显示后运行脚本?

时间:2017-10-31 12:56:59

标签: javascript angular typescript

我有一个表,在搜索后会填充数据。我希望运行一个脚本来在加载表后隐藏一些列。

我知道ngAfterViewInit()但不想使用它,因为脚本需要在单击搜索按钮并填充数据后运行,而不是在页面加载后

我有一个函数,其中代码在数据应该被加载后隐藏列但是当我在浏览器调试器中单步执行时,该功能在表中显示实际数据之前就被击中了,这就是为什么它不能正常工作

//not working
this.customerService.getCustomers(query).toPromise().then(data => {
    this.customers = data;
    this.hideColumns();
});

hideColumns() {
    $('.addressOld').hide()
}

我可以在哪里调用此功能?

1 个答案:

答案 0 :(得分:0)

你可以通过这种方式做你需要的事情(并且不需要使用jQuery来隐藏/显示元素,使用Angular和纯html属性):

.html

<button (click)="doSearch()">search</button>

<div [hidden]="customers"></div>

.ts

class YourComponent {
    customers = null;

    doSearch() {
        const query = 'something';
        this.customerService.getCustomers(query).toPromise().then(data => {
            this.customers = data;
        });

    }

}

使用html元素中的[hidden]属性隐藏它,如here所述。