Question

在输入框中输入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);
        }
      });
  }

Expected Behaviour Error In Console

Answer 1

您使用的ngx-bootstrap版本可能会影响您首先得到的错误，因此请首先使用最新版本

由于模板中的[typeaheadMinLength]="3"属性，错误仅在3个字符后出现，一旦输入了第3个字符，它将尝试更新绑定值。

从ngx-bootstrap docs中获取的typeahead不一定是可观察的：

选项源，可以是字符串，对象数组或外部匹配过程的Observable

因此，出于测试/开发的目的，使用像["one", "two", "three"]这样的简单Array而不是组件dataSourceObservable属性的空Observable会更容易（它们的第一个示例就是这样做）。

对于您收到的错误，您似乎没有使用实际的Observable对象，Observable.create方法实际上不能像Typeahead所期望的那样返回Observable，从而导致错误。

我不确定Observable对象来自哪个库，但是我认为它是rxjs（可能是较旧的版本），在6+版本中，有不同的创建方式一种可观察的方式：

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

我建议阅读Angular文档中的rxjs基础-https://angular.io/guide/rx-library

ngx-bootstrap：Typeahead，预期可观察到的错误

1 个答案: