时间戳

首页 > 解决方案 > Angular 6，类变量在完成之前不会从（更改）调用的方法内部更新

javascript - Angular 6，类变量在完成之前不会从（更改）调用的方法内部更新

问题描述

我正在尝试创建一个搜索框，当输入值更改或用户单击搜索图标时，它应该执行以下操作。

这是搜索框的模板 -

<div class="ui icon input">
    <input type="text" (change)="onSearchFieldChange($event)" placeholder="Search Fields..." #searchInput>
    <i class="search link icon" (click)="searchInput.change()" *ngIf="!searchText || searchText === ''"></i>
    <i class="times link icon" (click)="clearSearch()" *ngIf="searchText && searchText !== ''"></i>
</div>

这是实现代码 -

onSearchFieldChange(event) {
    this.searchText = event.target.value;
    this.search();
}

search() {
    this.previewTableLoading = true;

    // SOME HEAVY SEARCHING ALGORITHM THAT TAKES TIME

    this.previewTableLoading = false;
}

clearSearch() {
    this.searchText = '';
    this.search();
}

问题：

当输入值改变时，字段的值previewTableLoading不会立即更新。它等待整个search方法完成。这就是为什么绑定到该字段的微调器从未出现的原因。我觉得模板中的方法调用是同步执行的，并且该方法中的所有更新仅在方法完成时才生效。

我希望我清楚地解释了我的问题。如果有人能帮助我理解这个问题，那就太好了。谢谢。

标签： javascripthtmlangularangular6

解决方案

这将是使用 Observable 的好时机。

我不确定您是如何进行搜索的，但可以说您正在调用一些您拥有的服务，该服务返回一个可观察的（即 http 请求）

onSearchChange(event) {
   this.search(event.target.value);
}

search(searchTerm) {
    this.previewTableLoading = true;
    this.searchService.search(searchTerm)
    .subscribe( (results) => {
        //this is the result set that we get back
        this.resultSet = results;
        this.previewTableLoading = false;
    });
}

推荐阅读