Cannot read property 'pipe' of undefined at TagInputDropdown.getItemsFromObservable
bigyanchap opened this issue · 4 comments
bigyanchap commented
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
Gbuomprisco commented
public requestCategories = (text: string) => {
this.categoryService.getCategoriesBySubStr({ word: text });
};
You're not returning the Obervable?
bigyanchap commented
I am not sure, I understood what you asked. I hope this satisfies your question:
- My apiService is doing the return job.
- I tried to subscribe after
.getCategoriesBySubStr({ word: text })
but it gave me error.
Then, I guessed, it is the library which subscribes to theList<DisplayValueDTO>
that comes from server side.
where, DisplayValueDTO is...
public class DisplayValueDTO
{
public Int64 Value { get; set; }
public string Display { get; set; }
}
Gbuomprisco commented
If you don't return an Observable, your function is void:
public requestCategories = (text: string) => {
return this.categoryService.getCategoriesBySubStr({ word: text });
};
bigyanchap commented
Thank you Gbumprisco. I see what I missed. Now it's working like charm.