使用Ionic 2在預先填充的數據庫中執行搜索

我目前正在開發帶有Acronym Search功能工具的應用程序。我已經成功地使用SQLite-Ext插件顯示了預填充數據庫，但它仍然陷入瞭如何實現所需的搜索功能。在Ionic 2網站上，有關於如何使用內置的「離子搜索欄」https://ionicframework.com/docs/v2/components/#searchbar的解釋，但我無法看到如何將其連接到應用程序的預填充數據庫。使用Ionic 2在預先填充的數據庫中執行搜索

home.html-

<ion-content padding> 
    <ion-searchbar (ionInput)="queryAcronyms($event)"></ion-searchbar> 
    <ion-list> 
     <ion-item *ngFor="let name of acronyms; let nIndex = index"> 
     <h2>{{ name.name }}</h2> 
     <p>{{ name.meaning }}</p> 
    </ion-item> 
    </ion-list> 
</ion-content>

home.ts-

import { Component } from '@angular/core'; 

import { NavController } from 'ionic-angular'; 
import { SQLite } from 'ionic-native'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
    public storage: SQLite; 
    private options = { name: "data7.db", location: 'default', createFromLocation: 1 }; 
    private queryAcronyms = "SELECT * FROM acronymsFinal"; 
    public acronyms: any = []; 

    constructor(public navCtrl: NavController) { 
    this.storage = new SQLite(); 
    this.storage.openDatabase(this.options).then((success) => { 
     this.storage.executeSql(this.queryAcronyms, {}).then((data) => { 
     let rows = data.rows; 
     for (let i = 0; i < rows.length; i++) { 
      this.acronyms.push({ 
       name: rows.item(i).name, 
       meaning: rows.item(i).meaning 
      }); 
     } 
     }); 
    }); 
    } 
}

理想情況下，我需要一個搜索欄右邊的頁面的頂部（因爲我已經把in），它允許你通過它們的首字母縮略詞名稱來過濾數據。我也嘗試過運行其他各種搜索教程，但是這些都似乎針對Ionic 1或您在代碼中填充的數據庫。

我是相當新的離子和數據庫控制，所以任何幫助將不勝感激！

來源

2017-02-15 George Hodges

Create a new function with queryAcronyms name like below and filter your data according search query and reinitialize your array 

public queryAcronyms(){ 
    let temparray = []; 
    temparray = this.acronyms.filter((item) => { 
     return item.name.toLowerCase().indexOf(this.queryText.toLowerCase()) > -1; 
    }); 
    this.acronyms = temparray; 
}

來源

2017-02-15 18:04:01

我不確定這是什麼沒有解釋，但我不能讓你的代碼工作。它不斷提出「預期的聲明或聲明」並未能建立。此外，它是否意味着'queryText'在那裏考慮我從來沒有定義？ –

我無法弄清楚代碼中哪裏適合？ –

對不起，關於queryText，你可以在你的HomePage類中定義它，如 public acronyms：any = []; queryText =''; 然後綁定此queryText與搜索欄在您的視圖templete文件我希望這會幫助你 –

使用Ionic 2在預先填充的數據庫中執行搜索

回答

相關問題