Question

我正在关注Angular 2的一些教程，并试图将一个简单的Typeahead组件组合在一起。它正在工作，但我想添加一个选项，即在键入最小长度字符串之前不要点击服务器。我可以通过在流程中添加一个过滤器来实现这一点（但是），但是当我退回到最小值（或从输入中删除文本）时，我希望清除预先输入。目前，如果我键入最小长度和退格，结果仍然存在。

我可以将{ngIf和表单验证添加到table但是这感觉很糟糕，我想我应该能够以某种方式向模板发送一个空数组。但我无法找到有用的东西。

这是我所拥有的精简版本：

@Component({
    selector: 'typeahead',
    template: `
        <div>
            <input
                required
                type="text"
                placeholder="Person"
                #person [ngFormControl]="searchText">
        </div>
        <table>
            <tbody>
                <tr *ngFor="#person of people | async">
                <td> {{person.name}}</td>
                </tr>
            </tbody>
        </table>
        `,
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TypeAhead {
    searchText = new Control(); 
    people: Observable<any[]>;

    constructor(db:DBService){
        this.people = this.searchText.valueChanges
        .debounceTime(200)
        .filter((val:string) => (val.length > 1))
        .switchMap((val:string) => db.searchNodes("Person", val))   
    }
}

Answer 1

这是一个基于以下的清洁工作解决方案：
How to prevent http call in Angular 2 when using observables?

constructor(db:DBService){
    this.people = this.searchText.valueChanges
    .debounceTime(200)
    .switchMap((val:string) =>  val.length > 1
        ? db.searchNodes("Person", val))
        : Observable.of([]))   
}

要使用Observable.of，您需要导入import 'rxjs/Rx';

Answer 2

我认为你需要的是发生两件不同的事件。

一个用于调用searchNodes（仅当您有两个或更多字符时才会发生）。另一种是在退格后清除结果。

当你以这种方式想到它时（这是最简单的，也是最好的？）解决方案变得容易了。

<强> TL; DR 只需向检查退格的this.searchText.valueChanges添加第二个侦听器，然后清除结果。

注意：如果.valueChanges不包含按键，那么我非常确定还有另一个事件可以捕获按键。最后，您可以（我不建议）保留搜索结果的日志，然后在该searchString的长度减少时执行。

Angular 2中输入的可观察量和最小长度

2 个答案: