angular - TypeError: this.syncService.getShops(...).valueChanges 不是函数

Question

收到“TypeError：this.syncService.getShops(...).valueChanges 不是函数”错误，但我似乎无法弄清楚原因。它与我的getShops()功能有关吗？getShops返回一个商店对象数组。据我所知，这应该不是问题。Angular 新手，我正试图让我的离子搜索栏在商店列表上工作。

打字稿

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { ToolbarTitleService } from '../Services/toolbar-title.service';
import { IonSearchbar, PopoverController } from '@ionic/angular';
import { PopoverComponent } from '../popover/popover.component';
import { SyncServiceService } from '../Services/sync-service.service';
import { UserService } from '../Services/user.service';
import { first } from 'rxjs/operators';

@Component({
  selector: 'app-locaties',
  templateUrl: './locaties.component.html',
  styleUrls: ['./locaties.component.css'],
})
export class LocatiesComponent implements OnInit {
  public locations: any[] = [];
  user;
  public locationsBackup: any[] = [];

  constructor(
    private toolbarTitle: ToolbarTitleService,
    public popoverController: PopoverController,
    private syncService: SyncServiceService,
    private userService: UserService
  ) {}

  async ngOnInit() {
    this.toolbarTitle.setToolbarTitle('Locaties');
    this.user = await this.userService.getUser();
    // Haalt alle shops van de gebruiker op en zet ze in locations
    this.locations = await this.syncService.getShops(this.user);
    this.locations = await this.initializeItems();
  }

  // Popover
  async presentPopover(ev: any, Contact: any) {
    const popover = await this.popoverController.create({
      component: PopoverComponent,
      componentProps: {
        phones: Contact.Phones[0].Number,
        email: Contact.Email,
        street: Contact.Addresses[0].Street1,
        city: Contact.Addresses[0].City,
      },
      event: ev,
      translucent: true,
    });
    return await popover.present();
  }

  // Search
  async initializeItems(): Promise<any> {
    this.locations = await this.syncService
      .getShops(this.user)
      .valueChanges()
      .pipe(first())
      .toPromise();
    this.locationsBackup = this.locations;
    return this.locations;
  }

  // Filter
  async filterList(evt) {
    this.locations = this.locationsBackup;
    const searchTerm = evt.srcElement.value;

    if (!searchTerm) {
      return;
    }

    this.locations = this.locations.filter((currentLocation) => {
      if (currentLocation.Name && searchTerm) {
        return (
          currentLocation.Name.toLowerCase().indexOf(searchTerm.toLowerCase()) >
          -1
        );
      }
    });
  }
}

标签： angularionic-frameworkrxjs