“[object Object]，[Object Object]”用于管道'AsyncPipe‘

Question

我需要创建自动完成与角材料在角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: invalidPipeArgumentError (common.js:4800)管道'AsyncPipe‘的' Object，object对象’

有什么问题吗？我怎样才能解决这个问题？

Answer 1

异步管道订阅一个可观察的或承诺的值，并返回它发出的最新值。当发出新值时，异步管道将标记要检查更改的组件。当组件被破坏时，异步管道会自动取消订阅，以避免潜在的内存泄漏。

这里不需要使用异步管道，只需删除它，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>