ionic2 - Async-Funktion aktualisiert das Doom/UI nicht

Question

Umgebung: ionic2 mit Typoskript.

Ich habe eine Ion-Liste Elemente und Benutzer kann einige Daten hinzufügen.

Wenn ich Daten mit meiner addNoteKeyboard() Funktion hinzufügen, werden alle in Ordnung sein, Daten werden ordnungsgemäß angezeigt und meine Liste wird aktualisiert.

Verwenden Sie addNoteMic() Funktion, das heißt, Sprache zu Text verwenden, nichts würde bis zur ersten Iteration mit dem Bildschirm angezeigt werden (aber ich sehe die Daten sofort in der Konsolenprotokoll). .start() natürlich, ermöglicht die Aufnahme zu starten und onresult = Funktion (Ereignis) ermöglicht es, die Daten zu empfangen.

, dass mein Code ist:

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); 
    } 
} 

ich den ou sehen tput in der Konsole von event.results [0] [0] .transcript richtig, aber nichts erscheint auf dem Bildschirm, wenn ich versuche, es auf meine Liste zu schieben. Ich muss etwas mit der Benutzeroberfläche auf meinem Gerät tun, um die Ergebnisse magisch erscheinen zu lassen, wie eine neue Registrierung oder eine neue Tastatureinfügung.

UPDATE INFORMATIONEN: Dieses cordova plugin ermöglicht SpeechToText. Nach der Initialisierung (recognition = new SpeechRecognition()) können Sie es verwenden. recognition.start() die Anerkennung starten und wenn die Erkennungs Ende, in recognition.onresult Fall, dass Sie die Ergebnisse fangen, die event.results in zugänglich sind [0] [0] .transcript (i‘ Ich frage nach einem einzigen Ergebnis, deshalb [0] [0]).

In meiner Anwendung gibt es zwei Tasten:

Application

Die blau einen Anruf addNoteKeyboard() und Artikel werden sofort eingesetzt und sichtbar, in Bild, um die Benachrichtigung für zur Verfügung gestellt und erfrischend die UI mit dem neuen Element, das gerade eingefügt wurde.

Die rot ein Anruf addNoteMic() und Artikel werden sofort von Spracherkennung eingeführt, aber nicht sichtbar .. Ich habe mit der Benutzeroberfläche zu interagieren, sie zu zeigen, wie mein app ist erfrischend, nicht von Asynchron auf Veränderung Funktion. Aber die Daten existieren sicher, console.log print auf der Chrom-Konsole fein.

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

Hoffnung ist es jetzt klarer, und sorry für mein kleines Englisch.

PS: erste Postleitzahl aktualisieren, kommentiert, wo das verschobene Datum die Benutzeroberfläche nicht aktualisiert.

Was ist das Problem? Thx im Vorteil.

Answer 1

ngZone arbeiten wie ein Charme!

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(); 
    }