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：管道“ AsyncPipe”的“ [对象对象]，[对象对象]” 在invalidPipeArgumentError（common.js：4800）

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

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

管道“ AsyncPipe”的“ [对象对象]，[对象对象]”

1 个答案: