FormControl debounceTime 在角度 5（离子 3）中不可用

Posted 2023-03-13

【中文标题】FormControl debounceTime 在角度 5（离子 3）中不可用

【英文标题】：FormControl debounceTime not available in angular 5 (ionic 3)

【发布时间】：2018-05-08 10:42:12

【问题描述】：

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

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

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

【问题讨论】：

你可以试试this.<form>.get('<controlname>').valueChanges.subscribe

我刚刚编辑了我的问题...我忘了以秒为单位设置去抖时间...我看不到您如何在示例中设置延迟

你是否添加了去抖动的导入

@RahulSingh 谢谢...我实际上忘记导入 debounceTime...您可以发布答案以便我接受它作为正确答案吗？

【参考方案1】：

据我所知，使用 Rxjs 运算符的语法在 Rxjs 的下一版本（在 Angular 5 中使用）中发生了变化。试试这个：

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

必要时导入pipe 和debounceTime

【讨论】：

准确地说是 rxjs 5.5 更改...

嗨，感谢您的回答，但它不起作用......我得到“debounceTime is not defined”..

@SašoKovačič 你能在问题中显示你的导入语句吗？

导入 'rxjs/add/operator/debounceTime';

正如 Rahul Singh 建议的那样，我只需要导入 debounceTime 并且它现在正在工作......不需要管道部件......

【参考方案2】：

就像您在 Ionic docs 中看到的那样：

RXJS 5.5.2 更新

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

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

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 引入了一种不同的方法来做到这一点，这可能会导致 明显更小的代码包，可出租的运算符。

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

// 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，它允许我们要导入的模块是 孤立。

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

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 运算符会产生更小、更快的应用程序。

---

更新

就像@lifetimes在他的评论中提到的（你可以看到here），这个导入

import  switch  from 'rxjs/operators/switchMap';

应该替换为

import  switchMap  from 'rxjs/operators/switchMap';

使用较新版本时。

【讨论】：

感谢您的回答...很清楚，它现在正在工作...我会接受它作为正确答案...

很高兴听到它帮助了@SašoKovačič :)

为此。我知道这是一个引用，所以不会编辑它，但他们已将 import switch 重命名为 import switchMap 以供使用新版本的任何人使用

感谢@lifetimes！我已将其添加到答案中：)

【参考方案3】：

可能对example有帮助：

let debounce = this.name.valueChanges.pipe(
  debounceTime(1000), // delay 1000 msec
  distinctUntilChanged() // only for changed value
);
debounce.subscribe(changes => 
  console.log(changes);
);

【参考方案4】：

（2019 年 4 月 12 日）自这些答案发布以来发生了变化。现在debounce 接受durationSelector: (value T) => SubscribableOrPromse<any>。所以解决方案变成：

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