如何使用ionic& amp;搜索没有搜索栏的数据火力?

时间:2018-03-02 03:35:29

标签: android firebase ionic-framework

<ion-card *ngFor="let item of items | async">
<img [src]="'data:image/png;base64,' + item.imageData"/>
<ion-card-content>
  <ion-list no-lines>
    <ion-list-header>
      Text
    </ion-list-header>
   <ion-item *ngFor="let text of item.results[0].textAnnotations"(click)="itemTapped($event,text.description)">{{text.description}}</ion-item>
  </ion-list>
</ion-card-content>

javascript代码:

import {Component} from '@angular/core';
import {AlertController} from 'ionic-angular';
import {Camera,CameraOptions} from '@ionic-native/camera';
import {GoogleCloudVisionServiceProvider} from '../../providers/google-cloud-vision-service ';
import {AngularFireDatabase,FirebaseListObservable} from "angularfire2/database-deprecated";
import {DataProvider} from '../../providers/data/data';
import {IonicPage,NavController,NavParams} from 'ionic-angular';
import {FirstPage} from '../first/first';
import {FormControl} from '@angular/forms';

@Component({
    selector: 'page-camera',
    templateUrl: 'camera.html'
})

export class CameraPage {
    public item: Array < any > ;
    items: FirebaseListObservable < any[] > ;
    searchTerm: string = '';
    searchControl: FormControl;


    constructor(
        private camera: Camera,
        private vision: GoogleCloudVisionServiceProvider,
        private db: AngularFireDatabase,
        private alert: AlertController,
        public dataService: DataProvider,
        public navCtrl: NavController, public navParams: NavParams, ) {
        this.searchControl = new FormControl();
        this.items = db.list('/items');
    }

    takePhoto() {
        const options: CameraOptions = {
            quality: 100,
            targetHeight: 500,
            targetWidth: 500,
            destinationType: this.camera.DestinationType.DATA_URL,
            encodingType: this.camera.EncodingType.PNG,
            mediaType: this.camera.MediaType.PICTURE
        }

        this.camera.getPicture(options).then((imageData) => {
            this.vision.getLabels(imageData).subscribe((result) => {
                this.saveResults(imageData, result.json().responses);
            }, err => {
                this.showAlert(err);
            });
        }, err => {
            this.showAlert(err);
        });
    }

    saveResults(imageData, results) {
        this.items.push({
                imageData: imageData,
                results: results
            }).set({
                imageData: imageData,
                results: results
            })
            .then(_ => {})
            .catch(err => {
                this.showAlert(err)
            });
    }

    showAlert(message) {
        let alert = this.alert.create({
            title: 'Error',
            subTitle: message,
            buttons: ['OK']
        });
        alert.present();
    }

    declareItem(): void {
        this.item = [{
                my_name: 'Kari Ayam',
                eng_name: "Curry Chicken",
                ch_name: '咖喱鸡',
                des: "A whole genre, rather than a distinct dish, you'll find curries of all 
                sorts on Malaysian tables,
                a bowl of rice usually not far away.Malaysian
                versions tend to start with a rempah,
                a complex paste of spices and
                aromatics that 's cooked together and forms the base of the curry; like so 
                many of the country 's dishes, they tend to make use of coconut milk, too. ",
                pic: "https://firebasestorage.googleapis.com/v0/b/testing-
                227 d9.appspot.com / o / curry % 20 chicken.jpg ? alt = media & token = e28e63cd - 7906 - 4923 -
                b6d8 - 1 c7726d85615 "
            }, {
                my_name: "Roti Canai",
                eng_name: "Roti Canai",
                ch_name: "印度煎饼",
                des: "A classic Malaysian breakfast of Indian derivation, though this flaky 
                finger food is good any time of day(and really good at about three in the morning).A dough of flour,
                egg,
                and ghee(clarified butter) is incredibly,
                almost unbelievably elastic;it 's stretched quickly into a tissue-thin 
                sheet,
                like pizza dough but even more dramatic,
                then folded back up and
                griddled.In its best form,
                right off the griddle,
                it 's flaky and crisp like 
                a good croissant on the outside,
                soft and steaming and a little bit chewy on
                the inside.It 's also served with curry, often lentil dal; other versions 
                are cooked with egg,
                or onion,
                or sardines.
                ",
                pic: "https://firebasestorage.googleapis.com/v0/b/testing-
                227 d9.appspot.com / o / roti % 20 canai.jpg ? alt = media & token = b852c79f - 6 da6 - 48e1 -
                9 b94 - 50512 fa32be9 "
            },
            {
                my_name: "Nasi goreng",
                eng_name: "fried rice",
                ch_name: "炒饭",
                des: "Rice stir-fried with chilis and garlic and kecap manis (sweet soy); 
                like mee goreng,
                it might have chicken or shrimp
                for a little more
                substance.(I love it with a fried egg over the top.)
                ",
                pic: "https://firebasestorage.googleapis.com/v0/b/testing-
                227 d9.appspot.com / o / nasi % 20 goreng.jpg ? alt = media & token = ea257884 - 63 f5 - 4 cd2 -
                8 c6d - 4 d1cb4462d91 "

            }
        ];
    }

    itemTapped($event, text): void {


        let val: string = text;
        if (val.trim() !== '') {
            this.item = this.item.filter((item) => {
                return item.my_name.toLowerCase().indexOf(val.toLowerCase()) > -1;
            })
            this.navCtrl.push(FirstPage, text);
        }

    }
}

我使用谷歌文本检测,它会将结果存储在firebase中。 [firebase screenshot] [应用截图] 1在检测到单词后,我想传递文本并从我的列表中搜索(this.item()),但是我没有这样做。我的itemTapped函数不是为过滤器部件工作。

0 个答案:

没有答案