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

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

0 голосов
/ 30 января 2019

Получение этой ошибки, когда я набираю больше 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);
        }
      });
  }

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

1 Ответ

0 голосов
/ 30 января 2019

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

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

typeahead не обязательно должен быть Observable, взятым из ngx-bootstrap docs :

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

Так что для целей тестирования / 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 Docs - https://angular.io/guide/rx-library

...