首页 文章

您提供了'undefined',其中包含预期的流 . 您可以提供Observable,Promise,Array或Iterable

提问于
浏览
0

我已经认真地坚持让它工作两天了 . 我正在使用ngx-bootstrap的typeahead构建异步类型 . 从HTML模板开始,在typeahead和所选对象的被动形式中有一个输入:

<input class="form-control"
    formControlName="prefix"
    typeaheadOptionField="name"
    [typeahead]="accounts"
    (typeaheadOnSelect)="onSelect($event)">

这是我创建一个observable的组件,它首先调用我的http服务 accountTypeAhead() . 然后,对于某些错误处理内容,http服务的响应通过处理程序 responseHandler() 发送,然后将有效负载返回给组件 .

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { ApiHandlerService } from 'app/services/api-handler/api-handler.service';
import { EmitIdService } from 'app/services/emit-id/emit-id.service';
import { UsersService } from '../../services/users.service';

import { TypeaheadMatch } from 'ngx-bootstrap/typeahead/typeahead-match.class';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Component({
    selector: 'app-firm-modal',
    templateUrl: './firm-modal.component.html'
})

export class FirmModalComponent implements OnInit {

    accounts: Observable<any>;
    selectedOption: any;

    constructor(
        private apiHandler: ApiHandlerService,
        private idService: EmitIdService,
        private fb: FormBuilder,
        private users: UsersService
    ) {}

    ngOnInit() {

        this.accounts = Observable.create((observer: any) => {
            observer.next(this.userForm.value.prefix);
        }).mergeMap((prefix) => this.getAccounts(prefix));

        this.userForm = this.fb.group({
            prefix: new FormControl(),
            accountsToAdd: new FormArray([]),
            accountsToDelete: new FormArray([]),
            email: new FormControl(),
            name: new FormControl(),
            rolesToAdd: new FormArray([]),
            rolesToDelete: new FormArray([]),
            userId: new FormControl(),
        });

    }

    getAccounts(prefix) {
        this.users.accountTypeAhead(prefix).subscribe(
            response => {
                this.apiHandler.responseHandler(response);
            },
            (err) => {
                this.apiHandler.errorHandler(err);
            }
        );
    }

}

来自服务器的有效载荷就这样形成

[
    {
        'id': 12,
        'name': 'Rest test'
    },
    {
        'id': 13,
        'name': 'Rest test'
    }
]

所以现在运行它,当我输入输入中的第一个字母时,我在控制台中收到此错误:

core.js:1448 ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at subscribeToResult (subscribeToResult.js:74)
    at MergeMapSubscriber._innerSub (mergeMap.js:138)
    at MergeMapSubscriber._tryNext (mergeMap.js:135)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at Observable.eval [as _subscribe] (firm-modal.component.ts:135)
    at Observable._trySubscribe (Observable.js:172)
    at Observable.subscribe (Observable.js:160)
    at MergeMapOperator.call (mergeMap.js:92)
    at Observable.subscribe (Observable.js:157)
defaultErrorLogger  @   core.js:1448
ErrorHandler.handleError    @   core.js:1509
next    @   core.js:5497
schedulerFn @   core.js:4331
SafeSubscriber.__tryOrUnsub @   Subscriber.js:240
SafeSubscriber.next @   Subscriber.js:187
Subscriber._next    @   Subscriber.js:128
Subscriber.next @   Subscriber.js:92
Subject.next    @   Subject.js:56
EventEmitter.emit   @   core.js:4311
(anonymous) @   core.js:4771
ZoneDelegate.invoke @   zone.js:388
Zone.run    @   zone.js:138
NgZone.runOutsideAngular    @   core.js:4697
onHandleError   @   core.js:4771
ZoneDelegate.handleError    @   zone.js:392
Zone.runTask    @   zone.js:191
ZoneTask.invokeTask @   zone.js:496
ZoneTask.invoke @   zone.js:485
timer   @   zone.js:2025
setInterval (async)     
scheduleTask    @   zone.js:2046
ZoneDelegate.scheduleTask   @   zone.js:407
onScheduleTask  @   zone.js:297
ZoneDelegate.scheduleTask   @   zone.js:401
Zone.scheduleTask   @   zone.js:232
Zone.scheduleMacroTask  @   zone.js:255
scheduleMacroTaskWithCurrentZone    @   zone.js:1092
(anonymous) @   zone.js:2061
proto.(anonymous function)  @   zone.js:1372
AsyncAction.requestAsyncId  @   AsyncAction.js:71
AsyncAction.schedule    @   AsyncAction.js:64
Scheduler.schedule  @   Scheduler.js:46
DebounceTimeSubscriber._next    @   debounceTime.js:92
Subscriber.next @   Subscriber.js:92
schedulerFn @   core.js:4331
SafeSubscriber.__tryOrUnsub @   Subscriber.js:240
SafeSubscriber.next @   Subscriber.js:187
Subscriber._next    @   Subscriber.js:128
Subscriber.next @   Subscriber.js:92
Subject.next    @   Subject.js:56
EventEmitter.emit   @   core.js:4311
TypeaheadDirective.onInput  @   typeahead.directive.js:105
(anonymous) @   FirmModalComponent.html:66
handleEvent @   core.js:13547
callWithDebugContext    @   core.js:15056
debugHandleEvent    @   core.js:14643
dispatchEvent   @   core.js:9962
(anonymous) @   core.js:10587
(anonymous) @   platform-browser.js:2628
ZoneDelegate.invokeTask @   zone.js:421
onInvokeTask    @   core.js:4740
ZoneDelegate.invokeTask @   zone.js:420
Zone.runTask    @   zone.js:188
ZoneTask.invokeTask @   zone.js:496
invokeTask  @   zone.js:1517
globalZoneAwareCallback @   zone.js:1543

我刚开始学习使用observables,所以我不知道该怎么做 .

新堆栈跟踪:

core.js:1448 ERROR TypeError: Cannot read property 'slice' of undefined
    at TypeaheadDirective.prepareMatches (typeahead.directive.js:316)
    at TypeaheadDirective.finalizeAsyncCall (typeahead.directive.js:291)
    at SafeSubscriber.eval [as _next] (typeahead.directive.js:237)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)
    at SafeSubscriber.next (Subscriber.js:187)
    at Subscriber._next (Subscriber.js:128)
    at Subscriber.next (Subscriber.js:92)
    at MergeMapSubscriber.notifyNext (mergeMap.js:151)
    at InnerSubscriber._next (InnerSubscriber.js:25)
    at InnerSubscriber.Subscriber.next (Subscriber.js:92)
defaultErrorLogger  @   core.js:1448
ErrorHandler.handleError    @   core.js:1509
next    @   core.js:5497
schedulerFn @   core.js:4331
SafeSubscriber.__tryOrUnsub @   Subscriber.js:240
SafeSubscriber.next @   Subscriber.js:187
Subscriber._next    @   Subscriber.js:128
Subscriber.next @   Subscriber.js:92
Subject.next    @   Subject.js:56
EventEmitter.emit   @   core.js:4311
(anonymous) @   core.js:4771
ZoneDelegate.invoke @   zone.js:388
Zone.run    @   zone.js:138
NgZone.runOutsideAngular    @   core.js:4697
onHandleError   @   core.js:4771
ZoneDelegate.handleError    @   zone.js:392
Zone.runTask    @   zone.js:191
ZoneTask.invokeTask @   zone.js:496
ZoneTask.invoke @   zone.js:485
timer   @   zone.js:2025
setInterval (async)     
scheduleTask    @   zone.js:2046
ZoneDelegate.scheduleTask   @   zone.js:407
onScheduleTask  @   zone.js:297
ZoneDelegate.scheduleTask   @   zone.js:401
Zone.scheduleTask   @   zone.js:232
Zone.scheduleMacroTask  @   zone.js:255
scheduleMacroTaskWithCurrentZone    @   zone.js:1092
(anonymous) @   zone.js:2061
proto.(anonymous function)  @   zone.js:1372
AsyncAction.requestAsyncId  @   AsyncAction.js:71
AsyncAction.schedule    @   AsyncAction.js:64
Scheduler.schedule  @   Scheduler.js:46
DebounceTimeSubscriber._next    @   debounceTime.js:92
Subscriber.next @   Subscriber.js:92
schedulerFn @   core.js:4331
SafeSubscriber.__tryOrUnsub @   Subscriber.js:240
SafeSubscriber.next @   Subscriber.js:187
Subscriber._next    @   Subscriber.js:128
Subscriber.next @   Subscriber.js:92
Subject.next    @   Subject.js:56
EventEmitter.emit   @   core.js:4311
TypeaheadDirective.onInput  @   typeahead.directive.js:105
(anonymous) @   FirmModalComponent.html:66
handleEvent @   core.js:13547
callWithDebugContext    @   core.js:15056
debugHandleEvent    @   core.js:14643
dispatchEvent   @   core.js:9962
(anonymous) @   core.js:10587
(anonymous) @   platform-browser.js:2628
ZoneDelegate.invokeTask @   zone.js:421
onInvokeTask    @   core.js:4740
ZoneDelegate.invokeTask @   zone.js:420
Zone.runTask    @   zone.js:188
ZoneTask.invokeTask @   zone.js:496
invokeTask  @   zone.js:1517
globalZoneAwareCallback @   zone.js:1543

1 回答

  • 0

    mergeMap 采用更高阶的可观察量( Observable of Observable )并展平为普通的可观察量 .

    您要求 mergeMap((prefix) => this.getAccounts(prefix)) getAccounts 返回可观察的可观察量,但是

    getAccounts(prefix) {
        this.users.accountTypeAhead(prefix).subscribe(
            response => {
                this.apiHandler.responseHandler(response);
            },
            (err) => {
                this.apiHandler.errorHandler(err);
            }
        );
    }
    

    只是 getAccounts(prefix): void - 什么都不返回,Observable不能为mergeMap处理它 . 您应该返回正确的observable以期望mergeMap行为 .

相关问题