更改檢測不適用於角度輸入去抖動

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"; 基本上在設定的時間（500 毫秒）之后，它將觸發.subscribe函數中的內容。

我嘗試使用更改檢測器引用並檢測訂閱功能中的更改，但它對我不起作用。

Answer 1

這里的問題是當沒有任何內容觸發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}`)
  }
}