Cannot read property 'pipe' of undefined in NgbTypeahead

uncaught typeerror: cannot read property of null
cannot read property 'value' of undefined angular 7
cannot read property 'update' of undefined
cannot read property of undefined typescript
cannot read property of undefined subway app
cannot read property of undefined react
cannot read property of undefined node js
cannot read property of undefined javascript array

I am trying to use the typeahead directive of ng-bootstrap. I have the following HTML snippet:

<input type="text" class="form-control" formControlName="payee" autofocus [ngbTypeahead]="searchPayee">

accompanied by the following property in the component, just like the first example from ng-bootstrap official docs:

searchPayee = (text$: Observable<string>) => {
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => term.length < 2 ? []
        : ['aaa', 'bbbb'].filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10)));
  }

However, when executed, I get the following error. Any ideas what I am missing here?

TransactionModalComponent.html:50 ERROR TypeError: Cannot read property 'pipe' of undefined
    at NgbTypeahead.ngOnInit (ng-bootstrap.js:10414)
    at checkAndUpdateDirectiveInline (core.js:31909)
    at checkAndUpdateNodeInline (core.js:44366)
    at checkAndUpdateNode (core.js:44305)
    at debugCheckAndUpdateNode (core.js:45327)
    at debugCheckDirectivesFn (core.js:45270)
    at Object.eval [as updateDirectives] (MyComponent.html:50)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45258)
    at checkAndUpdateView (core.js:44270)
    at callViewAction (core.js:44636)

In their example, text$.pipe is being returned because they're not using a block statement (curly braces).

In your example, the expression is using a block statement (curly braces), so you have to explicitly use a return text$.pipe so that it is returned.

Example:

searchPayee = (text$: Observable<string>) => {
    return text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => term.length < 2 ? []
        : ['aaa', 'bbbb'].filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10)));
  }

or, without the block (as in the ngb example):

search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => term.length < 2 ? []
        : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
    )

Essentially, arrow functions work like this:

// returns val
const foo = (val) => val;

// returns val
const bar = (val) => {
  return val;
}

// returns nothing
const baz = (val) => {
  val;
}

Uncaught TypeError: Cannot read property of undefined In , Out of the six primitive types defined in JavaScript, namely boolean, string, symbol, number, Null, and undefined, no other type throws as many errors as� first, sorry for my english, i'm french i send a copy to be sign but when i go in my account and try to click on the document i see that message Cannot read property 'get' of undefined the person received it but on my side i can't open it to view the document. normaly, i was on the phone wit

I'm not sure why, this shouldn't be happening. You could always try adding an NgModel, but i suggest you do the following to make sure it doesn't happen:

searchPayee = (text$: Observable<string>) => {
   if(text$ === null || text$ === undefined) return;
   text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => term.length < 2 ? []
      : ['aaa', 'bbbb'].filter(v => 
            v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10)));
    }

Avoiding those dang cannot read property of undefined errors , Uncaught TypeError: Cannot read property 'foo' of undefined. The dreaded error we all hit at some point in JavaScript development. Could be� Uncaught TypeError: Cannot read property 'value' of null. Uncaught TypeError: Cannot read property 'innerHTML' of null. All this means is that you are trying to access a property of an object that is undefined. These usually happens when we don't test an object before using it. Here is a common scenario. // We want to get the value of an input.

This isn't an answer to the above but the google search brings you here and in case someone else comes here looking for help...

In my case, I had a parenthesis set that was not needed. Right after 'search' in the example below.

From <input [(ngModel)]="searchText" type="text" [ngbTypeahead]="search()" class="form-control form-control-sm" placeholder="Search..." />

To <input [(ngModel)]="searchText" type="text" [ngbTypeahead]="search" class="form-control form-control-sm" placeholder="Search..." />

Uncaught TypeError: Cannot read property 'value' of undefined , Seems like one of your values, with a property key of 'value' is undefined. Test that i1 , i2 and __i are defined before executing the if statements: Cannot read property 'ItemID' of undefined. Ask Question Asked 12 days ago. Active 12 days ago. Viewed 45 times 1. model.ts. export class ItemDetail { ItemID:number

How to avoid 'cannot read property of undefined' errors?, Update: If you use JavaScript according to ECMAScript 2020 or later, see optional chaining. TypeScript has added support for optional chaining in version 3.7. For more information about this property, please refer to serverSide and Server-side processing. Hope the explanation is clear and if so you can mark it as answer. For more problems, you are willing to open new threads.

Prevent “Cannot read property '…' of undefined” errors with , Every developer who did some JavaScript has got errors like “Cannot read property '…' of undefined”. There is one simple way to prevent them,� Uncaught TypeError: Cannot read property 'apply' of undefined at Array.<anonymous> Ask Question Asked 4 days ago. Active 4 days ago. Viewed 34 times 2. I want to

TypeError: Cannot read property 'name' of undefined � Issue #10803 , 0.0-beta.7 (from 5.3.18), when I run storybook I see an error. hooks.js:232 Uncaught TypeError: Cannot read property� Will second @bluemoehre here: following the quickstart to the letter, getting a Cannot read property 'on' of undefined. My setup is ArchLinux, node is managed by nvm: nvm --version 0.33.2 node --version v8.1.0

Comments
  • The only thing i see differently is the fact you're not using an NgModel, but i doubt that that is the problem. Does this always happen, or just in the beginning?
  • Your not returning anything in searchPayee. Either use return or remove the {}.