管道'AsyncPipe' '[object Object],[object Object]'

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>

但它向我显示此错误：

错误错误： 无效管道参数： "[对象对象]

，[对象对象]" 对于管道 "AsyncPipe" at invalidPipeArgumentError (common.js：4800(

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

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>