CODEWITHSUNDEEP
angularjstypescriptionic-frameworkionic2
mosca90
mosca90

Reputation: 999

ionic2 - async function does not update the doom / UI

Environment: ionic2 with typescript.

I have an ion-list items and user can add some data.

If I add data with my addNoteKeyboard() function, all will be ok, data will be shown properly and my list update.

Using addNoteMic() function, that is, use speech to text, nothing would be displayed until the first iteration with the screen (but i see the data immediately in console log). .start() of course , allows to start recording and onresult = function(event) allows to receive the data.

That's my code:

myList.html 

<ion-item (click)="goToMore($event, singolo.alimento)">
    {{singolo.alimento}}
</ion-item>

myList.ts

declare var SpeechRecognition: any;
@Component({templateUrl: 'build/pages/notes/notes.html'})

export class NotesPage {
    recognition: any;
    listaSpesa: any = [];

    constructor(private nav: NavController) {    
        this.recognition = new SpeechRecognition();
        this.recognition.onresult = (event => {
            if (event.results.length > 0) {          
                console.log('--> risultati: ', event.results[0][0].transcript);
                this.listaSpesa.push({alimento: event.results[0][0].transcript});
                // console has the right result, but can not display when i push in my list
            }  
            console.log('--> SpeechRecognition: listening END'); 
        });
    }

    addNoteMic() {
        console.log('--> SpeechRecognition: listening');
        this.recognition.start();
    }

    addNoteKeyboard() {
        let prompt = Alert.create({
            title: 'Add Food',
            inputs: [{
                name: 'alimento'
            }],
            buttons: [{
                text: 'Cancel',
                cssClass: 'cancBnt'
            },
            {
                text: 'Add',
                handler: data => {
                    this.listaSpesa.push(data);
                }
            }],
        });
        this.nav.present(prompt);
    }
}

I can see the output in console from event.results[0][0].transcript correctly, but nothing appears on the screen when i try to push it to my list. I have to do something with the UI on my device to make the results magically appear, like a new registration or a new keyboard insert.

UPDATE INFORMATION: This cordova plugin allows SpeechToText.

After the initialization (recognition = new SpeechRecognition()) you can use it. recognition.start() start the recognition and when the recognition end, in recognition.onresult event you can catch the results, which are accessible in event.results[0][0].transcript (i'm asking for a single results, that's why the [0][0]).

In my application, there are 2 buttons:

Application

The blue one call addNoteKeyboard() and item are inserted and visible immediately, using the alert provided in image and refreshing the UI with the new element just inserted.

The red one call addNoteMic() and item are inserted immediatly from speech recognition, but not visible.. I have to interact with the UI to showing them, like my app is not refreshing on change from async function. But the data exists for sure, console.log print on chrome console fine.

console.log('--> results: ', event.results[0][0].transcript);

Hope it's clearer now, and sorry for my little english.

PS: update first post code, commented where the pushed date does not update the UI.

What's the problem? Thx in advantage.

Upvotes: 0

Views: 803

Answers (1)

mosca90
mosca90

Reputation: 999

ngZone work like a charm!

import { Component, NgZone } from '@angular/core';
import { NavController, Alert, reorderArray} from 'ionic-angular';

declare var SpeechRecognition: any;

@Component({
  templateUrl: 'build/pages/notes/notes.html',
})
export class NotesPage {
  _zone: any;

  recognition: any;
  listaSpesa: any = [];

  constructor(private nav: NavController, _zone: NgZone) {
        this._zone = _zone;

        this.recognition = new SpeechRecognition();
        this.recognition.lang = 'it-IT';
        this.recognition.onresult = (event => {
          if (event.results.length > 0) {          
              console.log('--> risultati: ', event.results[0][0].transcript);
              this._zone.run(() => this.listaSpesa.push({alimento: event.results[0][0].transcript}));
          }  
          console.log('--> SpeechRecognition: listening END'); 
        });
  }

    addNoteMic() {
        console.log('--> SpeechRecognition: listening');
        this.recognition.start();
    }

Upvotes: 1

Related Questions