如何观察"searchTerm"输入字段的值变化? [英] How to have the `searchTerm` input field being observed for its value change?
问题描述
我有两个可以正常工作的观察值:
I have two observables that work fine:
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
ngOnInit() {
...
merge(this.sort.sortChange, this.paginator.page)
.pipe(
startWith({}),
switchMap(() => {
return this.getUsers(this.sort.active, this.sort.direction, this.paginator.pageIndex);
}),
map(userApi => {
这允许在更新排序或分页时调用getUsers
服务方法.
This allows for the getUsers
service method to be called when the sorting or the pagination is updated.
现在,我还希望在键入搜索词时调用此服务方法:
Now, I'd like to also have this service method being called when a search term is typed in:
@ViewChild(String) searchTerm: string;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
ngOnInit() {
...
merge(this.searchTerm.length, this.sort.sortChange, this.paginator.page)
.pipe(
startWith({}),
switchMap(() => {
return this.getUsers(this.searchTerm, this.sort.active, this.sort.direction, this.paginator.pageIndex);
}),
map(userApi => {
具有以下模板标记:
<mat-form-field>
<input matInput #searchTerm (keyup)="search($event.target.value)" placeholder="User name" autocomplete="off">
</mat-form-field>
但是,即使在页面加载时也不会调用service方法.
But the service method is then never called, not even at page load time.
我的想法是让searchTerm为可观察的,并由merge
方法观察该可观察的事物.这样,我只有一个方法调用getUsers
服务方法.
My idea is to have the searchTerm an observable, and have this observable being observed by the merge
method. This way I only have one method call to the getUsers
service method.
我也尝试了此语句(不使用.length
),但没有任何改变:
I also tried this statement (without the .length
) but it did not change anything:
merge(this.searchTerm, this.sort.sortChange, this.paginator.page)
更新:我现在正在尝试以下方法:
UPDATE: I'm now trying something along this line:
@ViewChild('searchTerm') searchTerm: ElementRef;
merge(this.searchTerm.nativeElement.changes, this.sort.sortChange, this.paginator.page)
search
事件处理程序确实会更新searchTerm
成员变量:
The search
event handler does update fine the searchTerm
member variable:
search(searchTerm: string) {
this.searchTerm.nativeElement.value = searchTerm.trim().toLowerCase();
if (this.paginator) {
this.paginator.firstPage();
}
}
我想我可以获取输入字段元素的值来调用服务方法:
I suppose I can get the value of the input field element to call the service method:
return this.getUsers(this.searchTerm.nativeElement.value, this.sort.active, this.sort.direction, this.paginator.pageIndex);
但是如果merge
包含this.searchTerm.nativeElement.changes
,则不会触发:
But the merge
is not fireing if it includes the this.searchTerm.nativeElement.changes
as in:
merge(this.searchTerm.nativeElement.changes, this.sort.sortChange, this.paginator.page)
如何观察searchTerm
输入字段的值变化?
How to have the searchTerm
input field being observed for its value change ?
推荐答案
我终于可以使用EventEmitter
对象解决问题了:
I finally could solve the issue, using an EventEmitter
object:
@Input() searchTerm: string;
@Output() searchTermEvent = new EventEmitter<{ value: string }>();
merge(this.searchTermEvent, this.sort.sortChange, this.paginator.page)
.pipe(
startWith({}),
switchMap(() => {
this.isLoadingResults = true;
return this.getUsers(this.searchTerm, this.sort.active, this.sort.direction, this.paginator.pageIndex);
}),
该事件与处理程序一起发出:
The event is emitted with the handler:
search(searchTerm: string) {
this.searchTerm = searchTerm;
this.searchTermEvent.emit({
value: this.searchTerm
});
if (this.paginator) {
this.paginator.firstPage();
}
}
在每个输入字符上启动getUsers
服务方法.
The getUsers
service method is fired up on each input character.
也许有更好的选择,但这暂时可行.
Maybe there is a better alternative, but this works fine for now.
这篇关于如何观察"searchTerm"输入字段的值变化?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!