0

I am trying to bind my typescript model to data from the backend to display in an ng-select dropdown. My HTML for ng-select looks like the following:

<ng-select [items]="employeeAccounts | async" (change)="accountSelected($event)" [loading]="isLoadingAccounts" placeholder="Please Select"></ng-select>

My Typescript for gathering the data to be displayed in the dropdown looks like the following:

ngOnInit() {
    this.getEmployeeAccounts(1);
  }

getEmployeeAccounts(employeeId) {
    this.isLoadingAccounts = true;
      this._apiService.GetEmployeeAccounts(
        (data) => {//success
          this.employeeAccounts = data;
          this.isLoadingAccounts = false;
        },
        (data) => {//error
          alert('Something went wrong!');
          this.isLoadingAccounts = false;
        },
        employeeId);
  }

However when I run the application I get the following error:

ConfigurationComponent.html:2 ERROR Error: InvalidPipeArgument: '[object Object],[object Object]' for pipe 'AsyncPipe' at invalidPipeArgumentError (common.js:4283) at AsyncPipe._selectStrategy (common.js:5732) at AsyncPipe._subscribe (common.js:5714) at AsyncPipe.transform (common.js:5688) at Object.eval [as updateDirectives] (ConfigurationComponent.html:6) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697) at checkAndUpdateView (core.js:13844) at callViewAction (core.js:14195) at execComponentViewsAction (core.js:14127) at checkAndUpdateView (core.js:13850)

I believe it is because of the async keyword defined in ng-select, however without it the dropdown doesn't show any items, but also doesnt throw any errors.

My question is about ng-select (https://github.com/ng-select/ng-select) InvalidPipeArgument error. It is a unique question, not a duplicate.

How can I fix this error?

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Mark
  • 501
  • 2
  • 11
  • 28
  • what is in your employeeAccounts ? array or object ?. check that – Akhil Aravind May 24 '18 at 06:54
  • Possible duplicate of [Invalid argument for pipe 'AsyncPipe'](https://stackoverflow.com/questions/35881721/invalid-argument-for-pipe-asyncpipe) – Daniel Beckmann May 24 '18 at 07:33
  • @akhilaravind employeeAccounts is an array of EmployeeAccount objects. – Mark May 24 '18 at 07:58
  • 1
    @DanielBeckmann no this is not a duplicate - this question is about ng-select, that post is not about ng-select. – Mark May 24 '18 at 08:00
  • It is irrelevant whether it is used with ng-select or a ngFor. As the answer in the referenced links says: "The async pipe expects an observable or a promise." You assign the result of your service request to an array/object (employeeAccounts) - this is not the way the AsyncPipe is working. – Daniel Beckmann May 24 '18 at 08:56

0 Answers0