javascript - 如何在搜索功能中处理 'No Results Found'

Question

如果有人使用我的搜索功能搜索未从数据库返回任何结果的内容，我会尝试显示“未找到结果”。我遇到的问题是“未找到结果”立即打印到屏幕上 - 然后在实际评估搜索查询时消失 - 然后如果没有找到结果则重新出现。换句话说，它正在正常工作，只是它应该等到查询实际触发并评估后再将“未找到结果”打印到屏幕上。从概念上讲，执行此操作的最佳方法是什么？一方面，我想到我可以使用暂停。但这并不能真正直接解决问题。那么解决这个问题的最佳方法是什么？这是我的函数代码:

public get noResultsFound(): boolean
{
    if (this.query && !this._isSearching && !this.hasResults) {
        return true;
    }
}

这是我的 View 代码:

<div *ngIf="inputHasFocus && noResultsFound" class="no-results-found">No Results Found</div>

Answer 1

Promise 听起来就像你所需要的:D https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

与此类似的东西。

search = (paramObj) : Promise<SomeDataClass> => {
    // Some search logic
}

requestSearch() {
    this.search(null).then((result) => {
        if (result.length === 0)
        {
            //logic for showing 0 results here
        }
        else{
            // Show result?
        }
    })
}

更完整的示例看起来有点像这样。

class example {
    public someBool = false;

    public search = (paramObj): Promise<Array<string>> => {
        this.someBool = !this.someBool;
        return new Promise<Array<string>>((resolver) => {
            // This just simulates something taking time.
            setTimeout(() => {
                if (this.someBool) {
                    resolver([]);
                } else {
                    resolver(["hi","there"]);
                }
            }, 1000)
        });
    }

    public requestSearch() {
        this.search(null).then((result) => {
            if (result.length === 0) {
                console.log("empty")
            }
            else {
                console.log(result)
            }
        })
    }
}