管道“AsyncPipe”的“[object Object],[object Object]”答案

【问题标题】：'[object Object],[object Object]' for pipe 'AsyncPipe'管道“AsyncPipe”的“[object Object],[object Object]”
【发布时间】：2019-12-31 06:12:33
【问题描述】：

我需要用 angular 8 的角度材料创建自动完成。

现在我在 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>

但它显示了这个错误：

错误错误：InvalidPipeArgument：管道“AsyncPipe”的“[object Object]，[object Object]” 在 invalidPipeArgumentError (common.js:4800)

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

【问题讨论】：

标签： javascript angular typescript asynchronous angular-material

【解决方案1】：

async 管道订阅 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>

【讨论】：

? @kianoushdortaj 将 userGroupOptions 与异步管道一起使用