javascript - '[object 对象],[object 对象 ]' for pipe ' AsyncPipe'

Question

我需要使用 Angular 为 8 的 Angular Material 创建自动完成功能。

现在我在 ts 文件中使用这段代码:

 @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);
  }

并在 html 文件中使用它:

          <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>

但它告诉我这个错误:

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

有什么问题吗？我该如何解决这个问题？？？？？

Answer 1

async pipe 订阅 Observable 或 Promise 并返回它发出的最新值。当发出新值时，异步管道标记要检查更改的组件。当组件被销毁时，异步管道会自动取消订阅以避免潜在的内存泄漏。

你不需要在这里使用异步管道只是删除它，admins 只是一个对象数组

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

已更新!

将 userGroupOptions 与异步管道一起使用

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