Ion-list: items inserted by async function does not update UI

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.

What’s the problem?
Thx in advantage.

No one has a solution for that dumb and easy question? :pensive:

Maybe you could try to replicate this in a small demo? Since it’s using a cordova plugin, it would be a few things, and it’s hard to know without a demo.

This cordova plugins 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:

  • 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.

Sounds like a zone problem.

Probably, I read something about ngZone, but it was not very clear…
How to solve or using ngZone in ionic2 then?

Here the solution:

Is there anyway instead of using ngZone? for example " | asyng" pipe
for example something like this:
<span>data to display : {{data | async}}</span>
??

This is extremely dependent on how the data is coming in. Please post the code that generates the problematic data.