管道操作员的行为不符合预期的RXJS

Question

请查看我的组件，目的是监听对输入的更改，然后将值发送到父组件。 我创建了一个只能频繁发出的管道，并且最小化对api的调用，由于某种原因，即使我可以看到它在管道中的各种console.log语句，它会在每次更改时发出值。 我错过了什么：

import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, KeyValueDiffers, DoCheck, KeyValueDiffer} from '@angular/core';
import {BehaviorSubject, Observable, of} from "rxjs";
import {debounceTime, distinctUntilChanged, map, skip, switchMap, takeUntil, tap} from "rxjs/operators";

@Component({
  selector: 'core-ui-typeahead-filter',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './typeahead-filter.component.html',
})
export class TypeaheadFilterComponent implements DoCheck {
  @Input() id: string;
  @Input() name: string;
  @Input() caption: string;
  @Input() placeholder: string;
  @Input() cssClass: string;
  @Input() cssStyle: string;
  @Input() function: any;

  @Input() data: Observable<string[]>;
  differ: any;
  detectChange: string = '';
  // term$ = new BehaviorSubject<string>('');
  text$ = new Observable<string>();

  @Output() onTypeahead: EventEmitter<any> = new EventEmitter<any>();
  @Output() onSelect: EventEmitter<any> = new EventEmitter<any>();


  constructor(private differs: KeyValueDiffers) {
    this.differ = this.differs.find({}).create();
  }

  handleTypeahead = (text$: Observable<string>) =>
    text$.pipe(
      distinctUntilChanged(),
      debounceTime(500),
    ).subscribe((value) => {
      this.onTypeahead.emit(of(value))
    })


handleSelectItem(item) {
  this.onSelect.emit(item);
}

ngDoCheck() {
    const change = this.differ.diff(this);
    if (change) {
      change.forEachChangedItem(item => {
        if (item.key === 'detectChange'){
          console.log('item changed', item)
          this.text$ = of(item.currentValue);
          this.handleTypeahead(this.text$);
        }
      });
    }
  }

}

更多背景：当detectChange发生变化时，输入上的detectChange链接到detectChange ，然后调用并执行ngDoCheck 。 一切都在可观察的情况下完成，所以在父母中我可以订阅传入的事件。 编辑------------------------------------------------- ------------------根据我对@ggradnig回答的理解尝试了以下解决方案，遗憾的是它跳过我的管道似乎有些错误，真的不确定：

 handleTypeahead = (text$: Observable<string>) => {
    this.test.subscribe(this.text$);
    this.test.pipe(
      distinctUntilChanged(),
      debounceTime(500),
      // switchMap(value => text$)
    ).subscribe((value) => {
      tap(console.log('im inside the subscription',value))
      this.onTypeahead.emit(value)
    })
  }



handleSelectItem(item) {
  this.onSelect.emit(item);
}

ngDoCheck() {
    const change = this.differ.diff(this);
    if (change) {
      change.forEachChangedItem(item => {
        if (item.key === 'detectChange'){
          console.log('item changed', item)
          this.text$ = of(item.currentValue);
          this.handleTypeahead(this.test);
        }
      });
    }
  }

}

Answer 1

您可以执行以下操作 -

export class TypeaheadFilterComponent implements DoCheck {
  @Input() id: string;
  @Input() name: string;
  @Input() caption: string;
  @Input() placeholder: string;
  @Input() cssClass: string;
  @Input() cssStyle: string;
  @Input() function: any;

  @Input() data: Observable<string[]>;
  differ: any;
  detectChange: string = '';
  // term$ = new BehaviorSubject<string>('');
  text$ = new BehaviorSubject<string>('');
  serachTerm$: Observable<string>;

  @Output() onTypeahead: EventEmitter<any> = new EventEmitter<any>();
  @Output() onSelect: EventEmitter<any> = new EventEmitter<any>();


  constructor(private differs: KeyValueDiffers) {
    this.differ = this.differs.find({}).create();
  }

  // handleTypeahead = (text$: Observable<string>) =>
  //   text$.pipe(
  //     distinctUntilChanged(),
  //     debounceTime(500),
  //   ).subscribe((value) => {
  //     this.onTypeahead.emit(of(value))
  //   })

  ngOnInit() {

    this.serachTerm$ = this.text$
                           .pipe(
                            distinctUntilChanged(),
                            debounceTime(500),
                            //filter(), //use filter operator if your logic wants to ignore certain string like empty/null
                            tap(s => this.onTypeahead.emit(s))
                           );
  } 

handleSelectItem(item) {
  this.onSelect.emit(item);
}

ngDoCheck() {
    const change = this.differ.diff(this);
    if (change) {
      change.forEachChangedItem(item => {
        if (item.key === 'detectChange'){
          console.log('item changed', item)
          this.text$.next(item.currentValue);          
        }
      });
    }
  }

}

现在，在模板的底部放置以下行 -

<ng-container *ngIf="searchTerm$ | async"></ng-container>

拥有这一行将使您的组件代码免于管理订阅[即不需要订阅/取消订阅]; 异步管道将负责它。