Question

我正在尝试使用Observables进行自动填充，但是出现了提示

的错误

Property 'filter' does not exist on type 'Observable<Entity[]>'

如何根据自己的作品进行自动填充？（我当时在考虑使用.pipe()，但我不太了解

这是我尝试过的：

.ts

  entity$: Observable<Entity>;
  entities$: Observable<Entity[]>;

  inputEntity = new FormControl();
  autocompleteEntities: Entity[] = [];
  subEntityText: Subscription;

  constructor(
    private userProvider: UserProvider,
    private entityProvider: EntityProvider,
    private cd: ChangeDetectorRef
  ) {}

  ngOnInit() {
    this.userProvider.user$.subscribe((user: User) => {
      this.entities$ = this.entityProvider.getAll(user.uid); # GET ENTITIES BASED ON USER UID
    });

    this.subEntityText = this.inputEntity.valueChanges.subscribe((query: string) => {
      if (query === '') {
        this.entity$ = null;
      } else {
        this.autocompleteEntities = this.searchEntity(query);
        this.cd.detectChanges();
      }
    });
  }

  searchEntity(query: string): Entity[] {
    if (query === '') return [];

    const queryRegExp = new RegExp(query, 'i');

    return this.entities$
      .filter(char => queryRegExp.test(char.name))
      .sort((a, b) => a.name.length - b.name.length);
  }

.html

<input
  type="text"
  [formControl]="inputEntity"
  [matAutocomplete]="auto"
/>

<mat-autocomplete #auto="matAutocomplete" class="option-autocomplete" autoActiveFirstOption>
    <mat-option class="option" *ngFor="let entity of autocompleteEntities" [value]="entity">
        <div class="option-character">
          <span class="option-character-name">{{entity.name}}</span>
        </div>
    </mat-option>
</mat-autocomplete>

预先感谢

Answer 1

您需要返回一个可观察的对象，另请参见How do I return the response from an asynchronous call?。

您可以使用map运算符对响应进行过滤和排序。还有其他选择。

import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

searchEntity(query: string): Observable<Entity[]> {
    if (query === '') return of([]);

    const queryRegExp = new RegExp(query, 'i');

    return this.entities$
      .pipe(map((entities) => {
        return entities
            .filter(char => queryRegExp.test(char.name))
            .sort((a, b) => a.name.length - b.name.length)
      }));
  }

使用Observables进行角度自动完成搜索

1 个答案: