Speech Recognition plugin with a <ion-searchbar>

cordova
1

I have a problem in Ionic, with the observable one that returns the speech recognition plugin. Because after signing up, the result returns late. I attach links to the code.

this an html code:

<ion-card *ngFor="let producto of arrayProductos">
    <ion-card-header>
        <ion-img [src]="producto.foto"></ion-img>
        <ion-card-header>
            <ion-card-subtitle>{{producto.nombre}}</ion-card-subtitle>
            <ion-card-title>{{producto.nombre}}</ion-card-title>
        </ion-card-header>
        <ion-card-content>Cantidad: {{producto.cantidad}}
        </ion-card-content>
        <ion-card-content>Precio: {{producto.precio}}
        </ion-card-content>
    </ion-card-header>
</ion-card>

and ts code:

import { Component} from ‘@angular/core’;
import { SpeechRecognition, SpeechRecognitionListeningOptions } from ‘@ionic-native/speech-recognition/ngx’;

@Component({
selector: ‘app-tab1’,
templateUrl: ‘tab1.page.html’,
styleUrls: [‘tab1.page.scss’]
})
export class Tab1Page {

constructor(private speechRecognition: SpeechRecognition) {

this.getArrayFotos();
this.startRecognition();
}

textoBuscar = ‘’;
arrayProductos = ;
onerror;
getArrayFotos() {
this.arrayProductos = [
{
nombre: ‘Polera polo xl’,
precio: 3000,
cantidad: 20,
foto: ‘https://www.brooksbrothers.cl/pub/media/catalog/product/cache/image/e9c3970ab036de70892d86c6d221abfe/b/1/b100076744_bb42_1.jpg’
},
{
nombre: ‘Polera adidas’,
precio: 2000,
cantidad: 10,
// tslint:disable-next-line:max-line-length
foto: ‘https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/68ad41ef8bb84fe1b96aaac001746ff7_9366/Polera_Polo_Designed_2_Move_3_Franjas_Blanco_FL0322_01_laydown.jpg’
}];

}

startListen() {
this.speechRecognition.startListening()
.subscribe(matches => {
const matchof: string = matches[0].toString();
this.textoBuscar = matchof;
this.arrayProductos = this.arrayProductos.filter((producto) => {
return producto.nombre.toLowerCase().indexOf(this.textoBuscar.toLowerCase()) > -1;
});
});
}

startRecognition() {

this.speechRecognition.hasPermission()
.then((hasPermission: boolean) => {
if (hasPermission) {
this.speechRecognition.requestPermission()
.then(
() => console.log(‘Tienes permiso’),
() => console.log(‘No tienes permiso del microfono’));
}});
}

// buscar(event?, buscar: string = ‘’) {

// if (buscar.length > 0) {
// this.textoBuscar = buscar;
// }
// if (event !== undefined) {
// this.textoBuscar = event.detail.value;

// }
// }

getItems(ev) {
const val = ev.target.value;
if (val && val.trim() !== ‘’) {
this.arrayProductos = this.arrayProductos.filter((producto) => {
return producto.nombre.toLowerCase().indexOf(this.textoBuscar.toLowerCase()) > -1;
});
} else {
this.getArrayFotos();
}}

active() {
console.log(‘active’);
}

stop() {
this.speechRecognition.stopListening();
console.log(‘Finished recording’);
}

getPermisson() {
// Check feature available
this.speechRecognition.hasPermission()
.then((hasPermission: boolean) => {
if (!hasPermission) {
this.speechRecognition.requestPermission()
.then(
() => console.log(‘Granted’),
() => console.log(‘Denied’)
);
}
});
}

  start() {
    const options = {
      language: 'es-ES'
    };
    this.speechRecognition.startListening(options)
    .subscribe(
      (matches: Array<string>) => {
        console.log(matches);
        this.textoBuscar = matches[0].toString();
        this.arrayProductos = this.arrayProductos.filter((producto) => {
          return producto.nombre.toLowerCase().indexOf(this.textoBuscar.toLowerCase()) > -1;
        });
      },
      (onerror) =>   this.stop(),
    )}

}