尝试搜索列表时出现“类型错误：无法读取未定义的属性‘过滤器’”

如何解决尝试搜索列表时出现“类型错误：无法读取未定义的属性‘过滤器’”

HTML

<ion-content fullscreen>
  <!-- Searchbar with a placeholder -->
  <ion-searchbar
    (ionInput)="filterList($event)"
    placeholder="Zoek een locatie"
  ></ion-searchbar>

  <ion-grid>
    <ion-row>
      <!-- locatie cards -->
      <ion-col class="row1" size="11">
        <ion-list lines="none">
          <ion-item *ngFor="let location of locations">
            <ion-card class="locatieCard">
              <ion-item>
                <img
                  class="locatieImg"
                  src="assets/spar_img.jpg"
                  slot="start"
                />
                <ion-grid>
                  <ion-row>
                    <ion-card-subtitle>{{ location.Name }}</ion-card-subtitle>
                  </ion-row>
                  <ion-row>
                    <ion-button
                      size="small"
                      fill="clear"
                      (click)="presentPopover($event,location.Contact)"
                    >
                      Meer info
                    </ion-button>
                  </ion-row>
                </ion-grid>
              </ion-item>
            </ion-card>
          </ion-item>
        </ion-list>
      </ion-col>

      <ion-col class="row2" size="1"> ion col 2 </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

TS

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
        );
      }
    });
  }
}

我正在尝试筛选商店列表。我不断收到“无法读取未定义的属性‘过滤器’”错误。我似乎无法弄清楚我必须改变什么才能让它发挥作用。 Locations 基本上是一个包含商店对象的数组。有人知道该怎么做吗？我知道这与 filterList 函数有关。

解决方法

直到 getShops() 返回值，locations 是未定义的（因此：无法读取未定义的属性过滤器）。

您可以将其初始化为空数组：

locations = [];

或检查它是否在 filterList 中未定义。

此外，initializeItems 永远不会被调用，因此 locationsBackup 也是如此。