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

问题描述

我刚刚将离子应用程序中的angular从版本4更新到了5.我有一些Search 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原型并进行修补 在方法上.

This approach involved modifying the Observable prototype and patching on the methods.

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))
  }
}

此微小更改仅允许导入我们需要的操作员 代码.这将导致更小，更快的应用程序.这个例子 使用深度导入，这允许我们要导入的模块为 隔离.

This slight change allows only import the operators we need in our code. This will result in a smaller, faster application. This example uses Deep Imports, which allow the module we want to import to be isolated.

因此，基本上，您需要稍微更改import语句以使用深度导入

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

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

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

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屋！