Question

经过一些试验和错误后，我有一个工作的Angular2搜索功能，在没有找到与用户查询匹配的结果的情况下，还会在屏幕上显示“找不到结果”。我的最后一个挑战是重新设置字段，以便下次用户进入搜索字段时，清除“找不到结果”。换句话说，只要用户存在搜索字段，它就应该重置。到目前为止，我所尝试的并不起作用。当用户单击搜索字段，然后单击回来时，“找不到结果”文本仍然会从最后一个实例打印到屏幕上。这就是我用来处理“未找到结果”屏幕的打印：

public get noResultsFound(): boolean
{
    if (!Object.isNullOrUndefined(this._results) && this._results.length < 1) {
        return true;
    } else if (Object.isNullOrUndefined(this.query)) {
        return false;
    }
}

在我看来，我有以下内容：

<div class="field-container">
    <i *ngIf="isSearchIconVisible" class="material-icons search-icon">search</i>
    <auto-complete-field
            class="auto-complete-field"
            #autoCompleteField
            (keyup)="onKeyUp($event)"
            (focus)="onFocus()"
            (blur)="onBlur()"
            [(value)]="query"
            [(options)]="__autoCompleteSuggestions">Loading...
    </auto-complete-field>
    <div *ngIf="inputHasFocus && noResultsFound" class="no-results-found">No Results Found</div>
</div>

Answer 1

根据您所说的内容，我建议您将此作为onBlur()的一部分进行处理。所以而不是：

*ngIf="inputHasFocus && noResultsFound"

类似的东西：

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

然后在您的控制器中，当showNoResults返回true时将true设置为noResultFound()，并在onBlur()

中将其设置为false

搜索完成后重置“找不到结果”功能

1 个答案: