Question

我使用angulasfire2类获取数据：

participantsList: AngularFireList<any>;
participants: Observable<any[]>;
filteredParts: Observable<any[]>;

在构造函数

中

this.participantsList = afDatabase.list('/paticipants');
this.participants = this.participantsList.valueChanges();

我想使用页面标题上的搜索栏过滤数据

if(this.searchword == "")
  this.filteredParts =  this.participants;

else {
  this.filteredParts = this.participants.filter(guest => {return guest.name.toLowerCase().indexOf(this.searchword) > -1});
}

但它给了我一个错误：

该物业的名称＆＃39;不存在于类型＆＃39;任何[]＆＃39;。
中

我添加了一个新的参与者

handler: data => {
        const newParticipant = this.participantsList.push({});

        newParticipant.set({
          id: newParticipant.key,
          name: data.name,
          surname: data.surname,
          paid: false
        });

在我从firebase导出的JSON文件中，我有

{
"paticipants" : {
"-L66ZM7Vr4pOVjHrN-L7" : {
  "id" : "-L66ZM7Vr4pOVjHrN-L7",
  "name" : "Giacomo",
  "paid" : true,
  "surname" : "Tabarelli"
},
"-L66dd9_JBypdrDgE7Y4" : {
  "id" : "-L66dd9_JBypdrDgE7Y4",
  "name" : "Paola",
  "paid" : true,
  "surname" : "Sandonà"
},
"-L66dg5ONTW84onoQKp8" : {
  "id" : "-L66dg5ONTW84onoQKp8",
  "name" : "Gianni",
  "paid" : true,
  "surname" : "Turatta"
}
}

无法理解这些类是如何工作的，这是与firebase交互的正确方法吗？或者也许我可以使用其他简单的课程？

Answer 1

我不熟悉Ionic，它始终是pipes实现它的好选择。你可以在网上找到任何教程。在这里，我有一个替代解决方案

在模板中，search()函数将在每次按键时触发。

<input name="search" type="text" placeholder="Search" (keyup)="search($event)">

在你的构造函数

中

this.participantsList = afDatabase.list('/paticipants');
this.participants = this.participantsList.valueChanges();

上面的代码最初会在页面加载时加载模板中的所有数据。在组件中添加以下功能，该功能将在每次按键时过滤数据

search(event){
    //console.log(event.target.value); 
    let term = (<HTMLInputElement>event.target).value;
    this.participants = this.participantsList.valueChanges().map(res=> res.filter(guest => guest.name.toLowerCase().includes(term.toLowerCase())))
  }

在模板中显示数据

<ng-container *ngIf="participants | async; let participantsItems; else nocontent">
    <div *ngFor="let participant of participantsItems">
        {{participant | json}}
    </div>
    <p>Search Results {{participantsItems.length}}</p>
</ng-container>
<ng-template #nocontent>No Search Result...</ng-template>

SearchBar Ionic 3不起作用

1 个答案: