如何根据所选选项从火力基地接收数据

Question

我开发了一个 ionic 2 应用程序，人们可以在其中将他们的血型添加到 Firebase 中。

现在我想实现一个搜索页面来接收来自 firebase 的数据，例如，有人想要搜索 B Rh+ 血型，只需选择该单选按钮，当他们单击搜索时，我想在 Firebase 中搜索 B Rh+ 血并列出它们。

这是我的搜索 HTML：

  <ion-list>
  <ion-item>
    <ion-label>Blood Type</ion-label>
    <ion-select [(ngModel)]="bloodtype">
      <ion-option value="ap">A Rh+</ion-option>
      <ion-option value="an">A Rh-</ion-option>
      <ion-option value="bp">B Rh+</ion-option>
      <ion-option value="bn">B Rh-</ion-option>
      <ion-option value="abp">AB Rh+</ion-option>
      <ion-option value="abn">AB Rh-</ion-option>
      <ion-option value="zp">0 Rh+</ion-option>
      <ion-option value="zn">0 Rh-</ion-option>
    </ion-select>
  </ion-item>
  <ion-item>
  <ion-range [(ngModel)]="range">
    <ion-icon range-left small name>0km</ion-icon>
    <ion-icon range-right small name>100km</ion-icon>
  </ion-range>
</ion-item>
<button ion-button full icon-left (click)="presentLoading()">
  <ion-icon name="search"></ion-icon>
  Search
</button>
</ion-list>

这是我的搜索.ts：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LoadingController } from 'ionic-angular';


@Component({
  selector: 'page-search',
  templateUrl: 'search.html'
})
export class SearchPage {
  constructor(public navCtrl: NavController,public loadingCtrl: LoadingController) {}
  ionViewDidLoad() {
    console.log('Hello SearchPage Page');
  }
  presentLoading() {
    let loader = this.loadingCtrl.create({
      content: "Please wait...",
      duration: 3000
    });
    loader.present();
  }
}

我尝试使用此参考this.bloodRef = firebase.database().ref('/bloods');使用搜索栏接收数据，但使用搜索栏不起作用，因为人们可以键入"brh+"或"b"等。

我的 Firebase 层次结构：

---bloods (id)
          ------ blood-type: "B Rh+"

Answer 1

您可以使用 orderBy 和 equalTo 函数过滤项目：

var results = [];
this.bloodRef.orderByChild('blood-type').equalTo(this.bloodtype).once("value")
  .then(function(snapshot) {
    //snapshot.val() is the object
  });