我需要使用 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)
有什么问题吗?我该如何解决这个问题?????
最佳答案
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>
关于javascript - '[object 对象],[object 对象 ]' for pipe ' AsyncPipe',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57668303/