'[object Object],[object Object]' for pipe 'AsyncPipe'

Question

i need to create autocomplete with angular material in angular 8 .

now i using this code in ts file :

 @Input() admins: User[];
  userGroupOptions: Observable<User[]>;
  filterFormFG: FormGroup;
  constructor(private utilService: UtilsService, private messageService: MessageService) {
    this.createForm();
    this.userGroupOptions = this.filterFormFG.get('createdByRefId').valueChanges
      .pipe(
        startWith(''),
        map(admin => admin ? this._filterStates(admin) : this.admins.slice())
      );
  }

  ngOnInit() {
    // tslint:disable-next-line: no-non-null-assertion


  }

  private _filterStates(value: string): User[] {
    const filterValue = value.toLowerCase();

    return this.admins.filter(state => state.fullname.toLowerCase().indexOf(filterValue) === 0);
  }

and using this in html file :

          <mat-form-field class="example-full-width" appearance="outline">
                        <input matInput [placeholder]="'MESSAGES.SENDER' | translate" aria-label="'MESSAGES.SENDER' | translate" [matAutocomplete]="auto"
                        formControlName="createdByRefId">
                        <mat-autocomplete #auto="matAutocomplete">
                            <mat-option *ngFor="let item of (admins | async)" [value]="item.firstName + ' ' +item.lastName">
                               {{ item.firstName + ' '+ item.lastName | translate }}
                            </mat-option>
                        </mat-autocomplete>
                    </mat-form-field>

but it show me this Error :

ERROR Error: InvalidPipeArgument: '[object Object],[object Object]' for pipe 'AsyncPipe' at invalidPipeArgumentError (common.js:4800)

whats the problem ? how can i solve this problem ?????

Answer 1

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

you don't need to use async pipe here just remove it, the admins is just an array of objects

<mat-option *ngFor="let item of admins" [value]="item.firstName + ' ' +item.lastName">
  {{ item.firstName + ' '+ item.lastName | translate }}
</mat-option>

Updated!

use the userGroupOptions with async pipe

<mat-option *ngFor="let item of userGroupOptions | async " 
             [value]="item.firstName + ' ' +item.lastName">
  {{ item.firstName + ' '+ item.lastName | translate }}
</mat-option>