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

搜索栏Ionic 3不工作

angularfire2 ionic3

james watt · 技术社区 · 7 年前

我通过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 回复 | 直到 7 年前

Hareesh 7 年前

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

推荐文章

Victor Ferreira · 我可以在没有MacOS的情况下使用带Ionic 3的TestFlight吗?

6 年前

Uraquitan Matova Ura Kombat · 离子,角度-索引内的全局变量。其他ts页面调用的html

6 年前

Muhammed Raheez PC · 构建应用程序时发生Ionic java构建错误

6 年前

Lee Merlas · 从http GET获得第一个结果后立即显示项目

6 年前

kelvin wong · Ionic 3 angularfire2打印出[对象对象]数据

7 年前

Arun Prasad E S · 角度5,离子3-【ts】类型“void”不可分配给类型“Observable<Post[]>”

7 年前

jamesharvey · 如何使用*ngFor指令从Ionic 3(Cordova、Ionic 3、Angular 5)上的存储器中提取数据

7 年前

user2486706 · 我们可以直接将C++dll集成到ionic框架中吗

7 年前

jamesharvey · 我怎样才能让谷歌地图在一个div内只占据50%的高度?(爱奥尼亚3号,科尔多瓦)

7 年前

Taieb · 按条件显示不同的视图

7 年前