FormControl debounceTime 在角度 5(离子 3)中不可用 [英] FormControl debounceTime not available in angular 5 (ionic 3)

问题描述

我刚刚将 ionic 应用程序中的 Angular 从版本 4 更新到了 5.我有一些搜索 FormControl 输入，允许用户通过 ajax 请求搜索数据库.我使用 debounceTime() 方法来延迟 ajax 搜索请求，但在角度升级后，此方法不再可用.我删除了这个方法调用，但现在在 android 上的每个用户按键都会发出一个新请求.

I just updated angular in ionic app from version 4 to 5. I have some search FormControl inputs that allow user to search a database via ajax requests. I used debounceTime() method to delay ajax search request but after angular upgrade this method is no longer available. I removed this method call but now a new request is made on every user key press on android.

还有其他方法可以实现这种延迟吗?

Is there any other way to achieve this delay?

this.searchControl.valueChanges
        .debounceTime(2000)
        .subscribe(search => this.getCities(search));

推荐答案

就像你在 离子文档:

Just like you can see in Ionic docs:

RXJS 5.5.2 更新

RXJS 5.5.2 Updates

RXJS 的最新更新包括对操作符的更改已申请.

The recent update of RXJS includes a change in how operators are applied.

传统上，运算符是这样应用的:

Traditionally, operators were applied like this:

import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/switchMap';

export MyClass {

  someMethod(){
    // Using Reactive Forms
    this.input.valueChanges
    .debounceTime(500)
    .switchMap(inputVal => this.service.get(inputVal))
    .subscribe(res => console.log(res))
  }
}

这种方法涉及修改 Observable 原型和修补关于方法.

RXJS 5.5 引入了一种不同的方法来做到这一点，这可能会导致明显更小的代码包，可出租的运算符.

RXJS 5.5 introduces a different way to do this that can lead to significantly smaller code bundles, lettable operators.

要使用 lettable 运算符，请修改上面的代码，使其看起来像这个:

To use lettable operators, modify the code from above to look like this:

// Use Deep imports here for smallest bunlde size
import { debounceTime } from 'rxjs/operators/debounceTime';
import { switch } from 'rxjs/operators/switchMap'; // <- Please read the update!

export MyClass {

  someMethod(){
    // Using Reactive Forms
    // We use the new `.pipe` method on the observable
    // too apply operators now

    this.input.valueChanges
    .pipe(
      debounceTime(500),
      switchMap(inputVal => this.service.get(inputVal))
    )
    .subscribe(res => console.log(res))
  }
}

这个细微的变化只允许在我们的代码.这将导致更小、更快的应用程序.这个例子使用 Deep Imports，它允许我们要导入的模块是孤立.

所以基本上你需要稍微改变导入语句来使用深度导入

So basically you'd need to slightly change the import statement to use deep imports

从 'rxjs/operators/debounceTime' 导入 { debounceTime };

然后在 pipe(...) 方法中使用 debounceTime:

And then use the debounceTime inside of the pipe(...) method:

this.input.valueChanges
    .pipe(
      debounceTime(500),
      // you can chain more operators if needed ...
      // ...
    )
    .subscribe(res => console.log(res))

您仍然可以使用旧方法(因为这还不是一项重大更改)，但使用 lettable 运算符会产生更小、更快的应用程序.

You can still use the old way (since this is not a breaking change yet) but using lettable operators will result in a smaller, faster application.

更新

就像他的评论中提到的 @lifetimes (你可以看到 这里)，这个导入

Just like @lifetimes mentioned in his comment (and as you can see here), this import

import { switch } from 'rxjs/operators/switchMap';

应该替换为

import { switchMap } from 'rxjs/operators/switchMap';

使用较新版本时.

这篇关于FormControl debounceTime 在角度 5(离子 3)中不可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！