ngx-bootstrap: Typeahead, ошибка ожидания наблюдаемого

Получение этой ошибки, когда я набираю более 3 символов в поле ввода.

TypeError: вы предоставили недопустимый объект там, где ожидался поток. Вы можете предоставить Observable, Promise, Array или Iterable.

.html файл:

<input class="form-control"
           type="text"
           [typeahead]="dataSourceObservable"
           typeaheadOptionField="address1"
           typeaheadGroupField="city"
           [typeaheadMinLength]="3"
           (typeaheadOnSelect)="setAddress($event)"
           id="{{componentId}}"
           maxlength="100"
           allowedPattern="^[a-zA-Z0-9\s\.\-\#]*$"
           appPatternRestrict
           [formControl]="componentFormControl"
           [(ngModel)]="quoteReference[jsonField]"
           [typeaheadOptionsLimit]="20"
           [appDisableControl]="componentDetails.locked"
           placeholder=" "
    />

.ts файл:

public dataSourceObservable: Observable<any>;


  constructor(public quoteDataService: QuoteDataService, public addressPrefillService: AddressPrefillService, public store$: Store<State>) {
    super(quoteDataService, store$);
    // Required for type ahead for values, do not remove unless thoroughly tested.
    this.dataSourceObservable = Observable.create(() => {})
  }


  ngOnInit() {
    this.componentFormControl.valueChanges
      .subscribe(value => {
        let address = null;
        this.store$.pipe(select(currentQuote)).pipe(take(1)).subscribe(val=>{
          if(val ) {
            if(val.garageAddress) {
              address = val.garageAddress;
            }
          }
        });
        if (address && address.zipCode !== null) {
          let request = {
            "zipCode": address.zipCode,
            "addressLine1": value
          };
          this.dataSourceObservable = this.addressPrefillService.prefillAddress(request);
        }
      });
  }

Ожидаемое поведение Ошибка в консоли


angular ngx-bootstrap typeahead
person Kiran    schedule 30.01.2019    source источник
comment
пожалуйста, добавьте this.dataSourceObservable = this.addressPrefillService.prefillAddress(request); определение   -  person Just code    schedule 30.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

Версия ngx-bootstrap, которую вы используете, может повлиять на ошибку, которую вы получаете, поэтому в первую очередь убедитесь, что вы используете последнюю версию

Ошибка появляется только после 3 символов из-за свойства [typeaheadMinLength]="3" в вашем шаблоне, после ввода 3-го символа он попытается обновить связанное значение.

typeahead не обязательно должен быть Observable, взятым из документации ngx-bootstrap. >:

источник параметров, может быть массивом строк, объектов или наблюдаемым для внешнего процесса сопоставления

Таким образом, для целей тестирования / dev было бы проще использовать простой массив типа ["one", "two", "three"] вместо пустого Observable для ваших компонентов свойства dataSourceObservable (это делается в их первом примере).

Что касается получаемой вами ошибки, похоже, что вы не используете фактический объект Observable, метод Observable.create не должен фактически возвращать Observable, как ожидает Typeahead, вызывая ошибку.

Я не уверен, из какой библиотеки используется этот объект Observable в вашем коде, но я предполагаю, что это rxjs, возможно, более старая версия, в версиях 6+ есть разные способы создания Observable, в одну сторону:

import { of } from 'rxjs';
of({}); // Makes Observable with empty object as data

Я бы посоветовал почитать основы rxjs в документации по Angular - https://angular.io/guide/rx-library

person tim545    schedule 30.01.2019