ionic2 - функция async не обновляет doom/UI

Question

Окружающая среда: ionic2 с машинописным текстом.

У меня есть элемент списка ионов, и пользователь может добавить некоторые данные.

Если я добавлю данные с помощью функции addNoteKeyboard(), все будет в порядке, данные будут отображаться правильно и мое обновление списка.

Использование функции addNoteMic() Функция, то есть использование речи в текст, ничего не будет отображаться до первой итерации с экрана (но я вижу данные немедленно в журнале консоли). .start(), конечно, позволяет начать запись и onresult = функция (событие) позволяет получать данные.

Вот мой код:

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

Я могу видеть НУ tput в консоли от event.results [0] [0] .transcript правильно, но ничего не появляется на экране, когда я пытаюсь вставить его в свой список. Мне нужно что-то сделать с пользовательским интерфейсом на моем устройстве, чтобы получить магические результаты, например, новую регистрацию или новую клавиатуру.

UPDATE ИНФОРМАЦИЯ: Это Cordova plugin позволяет SpeechToText.

После инициализации (признание = новый SpeechRecognition()) вы можете использовать его. recognition.start() начать признание и когда конец распознавания, в recognition.onresult случае вы можете поймать результаты, которые доступны в event.results [0] [0] .transcript (я» m с просьбой о единичных результатах, поэтому [0] [0]).

В моем приложении есть 2 кнопки:

Application

синий один вызов addNoteKeyboard() и элемент вставлены и видно сразу, используя предупреждения, содержащиеся в изображении и освежают Пользовательский интерфейс с новым вставленным элементом.

красного один вызов addNoteMic() и элемент вставляются немедленно от распознавания речи, но не виден .. Я должен взаимодействовать с пользовательским интерфейсом, чтобы показать им, как мое приложение не обновляются на переходе от асинхронного функция. Но данные существуют наверняка, console.log напечатайте на хром-консоли.

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

Надеюсь, теперь это яснее, и извините за мой маленький английский.

PS: обновить первый почтовый индекс, прокомментировал, где дата нажата не обновляет пользовательский интерфейс.

В чем проблема? 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(); 
    }