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()는 인식을 시작 및 recognition.onresult 이벤트에 인식 끝, 당신은 ([0]을 .transcript [0] event.results에 액세스 할 수있는 결과를 잡을 수있을 때 내가 ' 단일 결과를 묻는 이유는 [0] [0]입니다.

내 응용 프로그램에서

, 2 개 버튼이 있습니다

Application

블루 하나의 호출 addNoteKeyboard() 및 항목은 이미지에서 제공하는 경고를 사용하고 상쾌한, 즉시 삽입 볼 수 있습니다 새 요소가 방금 삽입 된 UI입니다.

빨간색 하나의 호출 addNoteMic() 및 항목이 음성 인식에서 immediatly 삽입되어 있지만, 보이지 .. 나는 내 응용 프로그램과 같은 비동기에서 변화 상쾌하지 않고, 그들에게 보여주는에 UI와 상호 작용해야 기능. 그러나 데이터는 확실하게 존재합니다. console.log는 크롬 콘솔에 잘 인쇄됩니다.

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

희망 사항은 지금은 분명하고 내 작은 영어는 유감입니다.

추 신 : 첫 번째 포스트 코드를 업데이트합니다. 푸시 된 날짜가 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(); 
    }