时间戳

首页 > 解决方案 > 变化检测不适用于角度输入去抖动

angular - 变化检测不适用于角度输入去抖动

问题描述

我有一个输入并且在去抖动（完成输入后半秒）我正在设置一个变量。我希望这个变量改变一些 html。它有效，但只有在我完成输入后，然后输入并重新开始。所以在第二次绕过它就可以了。我希望它在第一次发生。

这是我的html：

  <loader *ngIf="searchLoader"></loader>
  <input
    #searchInput
    placeholder="Search pages"
    [(ngModel)]="searchQuery"
    (keyup)="debounceSearch.next($event.target.value)"
  >

和我的 ts：

  debounceSearch: Subject<any> = new Subject<any>();

  ngOnInit() {
    this.debounceSearch
      .pipe(debounceTime(500))
      .pipe(takeUntil(this.destroy$))
      .subscribe(() => {
        this.searchLoader = true;
        this.searchDocs();
      });
  }

所以在上面，<loader></loader>只有在第二次去抖动之后才会出现。这很奇怪，因为我立即将变量设置为 true。

我尝试使用更改检测器 ref 并检测订阅功能中的更改，但它对我不起作用。

标签： angularinputdebounceangular-changedetection

解决方案

这里的问题是你试图在没有任何东西触发的情况下分配一个值Subscription。

以StackBlitz上的这个例子为例， 如果你打开控制台日志，你最终会按以下顺序看到这个

  • 调用 ngOnChanges
  • ngOnInit 调用。
  • 开启未定义

请注意，订阅中的 console.log 不会被调用。

由于没有触发订阅，因此永远不会调用内部回调。您当前情况的一种解决方案是this.searchLoader = true or false;在ngOnInit

@Component({
  selector: 'hello',
  template: `
    <h1>Hello {{name}}!</h1>
    <p *ngIf="turnOn">I'm a ninja</p>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit  {
  @Input() name: string;

  turnOn: boolean;
  switchSubject: Subject<any> = new Subject<any>();

  ngOnChanges() {
    console.log('ngOnChanges called.');
  }

  ngOnInit() {
    console.log('ngOnInit called.');
    this.switchSubject.subscribe(() => {
      console.log('subscription activated.');
      this.turnOn = true;
    })
    console.log(`turnOn is ${this.turnOn}`)
  }
}

推荐阅读