ng-bootstrap：打开焦点

Question

最近写代码是根据office site Open on focus

以下是主要代码。

在html文件中：

<input 
  class="single-input" 
  [(ngModel)]="diagnosisReport.diagnosis" 
  type="text"
  #diagnosis="ngbTypeahead"
  [ngbTypeahead]="searchDiagnosis"
  (focus)="focus$.next($any($event).target.value)"
  (click)="click$.next($any($event).target.value)"
  [disabled]="isDisabledForm" 
/>

在typescript文件中：

import {NgbTypeahead} from '@ng-bootstrap/ng-bootstrap';
import {debounceTime, distinctUntilChanged, filter, map} from 'rxjs/operators';
import { Observable, Subject, merge } from 'rxjs';


@ViewChild('diagnosis', {static: true}) diagnosisInstance: NgbTypeahead;
focus$ = new Subject<string>();
click$ = new Subject<string>();

public searchDiagnosis(text$: Observable<string>): Observable<string[]> {
  const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
  const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.diagnosisInstance.isPopupOpen()));
  const inputFocus$ = this.focus$;

  return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
    map(term => (term === '' ? ['jimmy']
      : ['kimmy'])
  ));

}

但是，我收到以下错误：

ERROR TypeError: Cannot read properties of undefined (reading 'click$')
ERROR TypeError: Cannot read properties of undefined (reading 'focus$')

我尝试设置超时 function 来处理 click$ 和 focus$，例如：

setTimeout(() => {
  console.log(this.click$);
}, 100)

但是，我得到了同样的错误ERROR TypeError: Cannot read properties of undefined (reading 'click$') 。

所以，任何人都可以帮助我。

Answer 1

您需要将 function 定义为演示中给出的OperatorFunction ，以便您的searchDiagnosis代码看起来像

searchDiagnosis: OperatorFunction<string, readonly string[]>  = (text$: Observable<string>) =>{
    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
    const inputFocus$ = this.focus$;
  
    return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
      map(term => (term === '' ? ['jimmy']
        : ['kimmy'])
    ));
  
  }

演示

或者在您的 html 中使用searchDiagnosis.bind(this)

<input
  id="typeahead-focus"
  type="text"
  class="form-control"
  [(ngModel)]="model"
  [ngbTypeahead]="searchDiagnosis.bind(this)"
  (focus)="focus$.next($any($event).target.value)"
  (click)="click$.next($any($event).target.value)"
  #instance="ngbTypeahead"
/>