Question

我有一个输入，并且在反跳上（完成键入后半秒钟），我正在设置一个变量。我希望此变量更改一些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。

debounceTime来自rxjs运算符import { debounceTime, takeUntil } from "rxjs/operators";，基本上是在设置的时间（500ms）之后，它将触发.subscribe函数中的所有内容。

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

有什么想法吗？谢谢！

Answer 1

这里的问题是您试图在没有触发Subscription的情况下分配一个值。

以StackBlitz为例如果您打开控制台日志，您将最终按照以下顺序查看

ngOnChanges被称为
ngOnInit被调用。
turnOn未定义

请注意，未调用订阅中的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}`)
  }
}

更改检测不适用于角度输入去抖动

1 个答案: