angular - 尝试搜索列表时出现“TypeError:无法读取未定义的属性‘过滤器’”
问题描述
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
.
推荐阅读
- lua - 立即中止 Lua 脚本
- mysql - 关于 SQL 中的数据函数
- linux - 有没有一种简单的方法可以在终端中拥有/执行一组常用命令
- moto - Moto:Boto3 ListObjects 显示键,但 GetObject 返回 NoSuchKey 错误
- reactjs - 我在 Visual Studio Code 中的 React 解决方案突然没有遇到断点
- azure - 我无法从 CLI 获取 ARM 模板
- python - 为什么在运行工作代码时会出现 Kivy 错误?
- sql - DB2 REGEXP_LIKE 无法识别字段数据中的破折号
- html - 没有悬停的悬停效果
- python - Django Celery OSError:无法获得平均负载