代码之家 › 专栏 › 技术社区 › james watt

搜索栏Ionic 3不工作

angularfire2 ionic3

james watt · 技术社区 · 6 年前

我通过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});
}

但这给了我一个错误:

类型“any[]”中不存在属性“name”。

我添加了一个新参与者

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交互的正确方式吗?或者我可以使用其他简单的课程?

1 回复 | 直到 6 年前

Hareesh 6 年前

我对爱奥尼亚并不熟悉,用它来实现它总是一个很好的选择 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>