Question

我正在使用ngx-bootstrap的预先输入功能https://valor-software.com/ngx-bootstrap/#/typeahead#on-select

我不知道为什么我的控制台ERROR TypeError: undefined is not observable中使用ngx-bootstrap使用我的预先输入错误。这是导致问题的模板输入：

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

，component.ts如下：

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { TypeaheadMatch } from 'ngx-bootstrap/typeahead/typeahead-match.class';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
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';

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

export class FirmModalComponent implements OnInit {

    @ViewChild('content') content: any;

    accounts: any;
    selectedOption: any;
    user: any;
    userForm: FormGroup;

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

    ngOnInit() {

        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(),
        });

        this.idService.selectedId.subscribe(id => {
            if (id > 0) {
                this.users.getUser(id).subscribe(
                    response => {
                        this.user = this.apiHandler.responseHandler(response);
                        this.userForm.patchValue(
                            {
                                email: this.user.email,
                                userId: this.user.userId,
                                name: this.user.name
                            }
                        );
                    },
                    (err) => {
                        this.apiHandler.errorHandler(err);
                    }
                );
                this.openModal();
            }
        });
    }

    openModal() {
        this.modalService.open(this.content);
    }

    roles(event, val) {
        const rolesToAdd = this.userForm.value.rolesToAdd;
        const rolesToDelete = this.userForm.value.rolesToDelete;
        if (event.target.checked) {
            rolesToDelete.splice(rolesToDelete.indexOf(val), 1);
            rolesToAdd.push(val);
        } else {
            rolesToAdd.splice(rolesToAdd.indexOf(val), 1);
            rolesToDelete.push(val);
        }
    }

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

    onSelect(event: TypeaheadMatch): void {
        this.selectedOption = event.item;
    }

}

我不确定这个错误意味着什么。关心帮忙？

core.js:1448 ERROR TypeError: undefined is not observable
    at Function.FromObservable.create [as from] (FromObservable.js:109)
    at MergeMapSubscriber.eval [as project] (typeahead.directive.js:246)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at DebounceTimeSubscriber.debouncedNext (debounceTime.js:101)
    at AsyncAction.dispatchNext (debounceTime.js:117)
    at AsyncAction._execute (AsyncAction.js:119)
    at AsyncAction.execute (AsyncAction.js:94)
    at AsyncScheduler.flush (AsyncScheduler.js:38)
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:58
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

Answer 1

我猜accounts对象是undefined。

ngx-bootstrap~ERROR TypeError：undefined不可观察

1 个答案: