ionic2 - 非同期関数は運命/ UIを更新しません

Question

環境：ionic2 with typescript。

イオンリスト項目があり、ユーザーはデータを追加できます。

addNoteKeyboard（）機能を使用してデータを追加すると、すべて正常に表示され、データが正しく表示され、リストの更新が行われます。 addNoteMic（）機能を使用して

は、それは、テキストに使用スピーチで、何も画面との最初の反復まで表示されないであろう（しかし、私は、コンソールログにすぐにデータを参照してください）。 .start（）もちろん、記録を開始することができ、onresult = function（event）はデータを受け取ることができます。私のコードです

：

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

私はOUを見ることができますコンソールのtputはevent.results [0] [0] .transcriptから正しく表示されますが、リストにプッシュしようとすると画面に何も表示されません。 新しい登録や新しいキーボード挿入のような結果を魔法のように表示するには、デバイスのUIで何かをしなければなりません。

更新情報： このコードコードpluginはSpeechToTextを許可します。

初期化（認識=新しいSpeechRecognition（））の後、それを使用することができます。 recognition.start（）（i」は[0]を.transcript [0] recognition.onresultイベントであなたがevent.resultsにアクセス可能な結果を​​、キャッチすることができ、認識とするとき認識終了を開始単一の結果を求めているので、[0] [0]です。

Application

青色 1つのコールaddNoteKeyboard（）と項目が挿入され、可視直ちに、画像内に設けられた警告を使用してリフレッシュされる：私のアプリケーションにおいて

、2つのボタンがあります新しい要素が挿入されたUI。

赤 1つのコールaddNoteMic（）と項目は、音声認識からすぐに挿入されますが、見えない..私は私のアプリのような非同期の変化にリフレッシュされていない、それを示すにUIと対話する必要があり関数。 しかし、確かにデータは存在しますが、console.logはChromeのコンソールに表示されます。

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

私の小さな英語には申し訳ありません。

PS：最初の郵便番号を更新し、プッシュされた日付でUIが更新されない箇所をコメントしました。

問題が何ですか？ Thxが有利です。

Answer 1

ngZoneチャームのように動作します！

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