英文:
I need help understanding how to turn this function into a stream for responsive and up-to-date results
问题
我在这个项目中实现了NGB-Typeahead，但我发现适用于它的过滤函数是在事后返回结果的。我需要提供当前的结果，我想使用流订阅应该可以解决，但是使用[ngbTypeahead]绑定让我感到困惑。
这是在Angular 7中的情况。
示例：
用户输入：000
结果：没有，因为我让它等待文本长度为3，当输入第三个字符时结果还不存在。
用户输入：之前的 + 0
结果：00000234，12000034，请注意只有3个被突出显示，因为这是之前的结果。现在已经请求了另一个结果的变化，但它要等到下一个字符被输入才会显示出来。
<input type="text" class="search" [(ngModel)]="typeAheadModel" [ngbTypeahead]="filter" [resultTemplate]="result" [inputFormatter]="NumFormatter" />
filter = (text$: Observable<string>) =>
text$.pipe(
debounceTime(200),
distinctUntilChanged(),
map(
(term) =>
term.length < 3
? []
: (this.pageController.fetchPageSearchList(
this._searchCriteriaSelection,
term,
'30'
),
this._searchResults).slice(0, 5)
)
);
我很难理解如何将这个问题分解成一个可以订阅的操作和流，以使结果保持最新，而不使用async-await方法。
提前感谢任何帮助！
英文:
So I implemented NGB-Typeahead in this project but the filtering function I found that works for it returns a result after the fact. I need to provide results that are current and I figure using a stream subscription should work but using the [ngbTypeahead] binding is confusing me.
This is in Angular 7.
Example:
User inputs: 000
Results: nothing because I have it wait for length 3 in the text and the results don't exist when the 3rd
character is typed
User inputs: previous + 0
Results: 00000234 , 12000034 Note that only 3 are highlighted because this is the previous result. Now another result has been requested by the change but it won't show until the next character has been typed in.
<input type="text" class="search" [(ngModel)]="typeAheadModel" [ngbTypeahead]="filter" [resultTemplate]="result" [inputFormatter]="NumFormatter" />
filter = (text$: Observable<string>) =>
text$.pipe(
debounceTime(200),
distinctUntilChanged(),
map(
(term) =>
term.length < 3
? []
: (this.pageController.fetchPageSearchList(
this._searchCriteriaSelection,
term,
'30'
),
this._searchResults).slice(0, 5)
)
);
I am having a hard time wrapping my head around how to break this down into an action and a stream that can be subscribed to that will keep the results current without using the async-await methodology.
Thanks in advance for any help!
答案1
得分: 1
尝试filter掉传递给事件流的事件。
filter = (text$: Observable<string>) =>
text$.pipe(
debounceTime(200),
distinctUntilChanged(),
filter(term => term.length > 3),
switchMap(term => this.pageController.fetchPageSearchList(term))
);
英文:
Try to filter out events getting passed down the event stream.
DEMO
<!-- language: lang-js -->
filter = (text$: Observable < string > ) =>
text$.pipe(
debounceTime(200),
distinctUntilChanged(),
filter(term => term.length > 3),
switchMap(term => this.pageController.fetchPageSearchList(term));
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论