Gbuomprisco/ngx-chips

Cannot read property 'pipe' of undefined at TagInputDropdown.getItemsFromObservable

bigyanchap opened this issue · 4 comments

I'm submitting a ...

[x] support request/question

Current behavior

I get following error while tags were observed:

core.js:6210 ERROR TypeError: Cannot read property 'pipe' of undefined
    at TagInputDropdown.getItemsFromObservable (ngx-chips.js:1200)
    at SafeSubscriber.TagInputDropdown.show [as _next] (ngx-chips.js:1151)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at FilterSubscriber._next (filter.js:33)
    at FilterSubscriber.next (Subscriber.js:49)
    at DebounceTimeSubscriber.debouncedNext (debounceTime.js:40)
    at AsyncAction.dispatchNext (debounceTime.js:53)

Expected behavior

Display Tags in a dropdown

Minimal reproduction of the problem with instructions (if applicable)

---html---

<form [formGroup]="categoryForm">
  <div class="force-to-the-bottom">
    <tag-input formControlName="myCategories" [onlyFromAutocomplete]="true">
      <tag-input-dropdown [autocompleteObservable]="requestCategories">
      </tag-input-dropdown>
    </tag-input>
  </div>
</form>

--- component ---

public requestCategories = (text: string) => {
	this.categoryService.getCategoriesBySubStr({ word: text });
};

--- category.service.ts ---

getCategoriesBySubStr(data): Observable<any> {
	return this.apiService.post('Category/getBySubStr', data);
}

--- api.service.ts ---

post(path: string, body: Object = {}): Observable<any> {
    return this.http.post(
      `${environment.apiUrl}${path}`,
      body
    ).pipe(
      tap((res) => this.postReutnData(res)),
      catchError((err) => this.postPutFormatErrors(err))
    );
  };

**Built the app using: **

angular CLI

Angular version:

Angular v8

ngx-chips version:

2.1.0

Browser: Chrome XX

public requestCategories = (text: string) => {
	this.categoryService.getCategoriesBySubStr({ word: text });
};

You're not returning the Obervable?

I am not sure, I understood what you asked. I hope this satisfies your question:

  1. My apiService is doing the return job.
  2. I tried to subscribe after .getCategoriesBySubStr({ word: text }) but it gave me error.
    Then, I guessed, it is the library which subscribes to the List<DisplayValueDTO> that comes from server side.
    where, DisplayValueDTO is...
public class DisplayValueDTO
 {
        public Int64 Value { get; set; }
        public string Display { get; set; }
 }

If you don't return an Observable, your function is void:

public requestCategories = (text: string) => {
 return this.categoryService.getCategoriesBySubStr({ word: text });
};

Thank you Gbumprisco. I see what I missed. Now it's working like charm.