ionic2 - 異步函數不更新厄運/ UI

環境：ionic2與打字稿。ionic2 - 異步函數不更新厄運/ UI

我有一個離子列表項目，用戶可以添加一些數據。

如果我用我的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); 
    } 
}

我可以看到歐在控制檯輸入event.results [0] [0] .transcript正確，但是當我嘗試將它推送到我的列表時屏幕上沒有顯示。我必須對設備上的用戶界面進行操作才能使結果奇蹟般地出現，如新的註冊或新的鍵盤插入。

更新信息： 此cordova plugin允許SpeechToText。

初始化後（recognition = new SpeechRecognition（））您可以使用它。 recognition.start（）啓動識別和當識別結束時，在recognition.onresult事件可以捕獲的結果，這是在event.results [0] [0] .transcript訪問（I」 m要求單個結果，這就是爲什麼[0] [0]）。

在我的應用程序中，有2個按鈕：

Application

的藍色一個呼叫addNoteKeyboard（）和物品被插入並立即可見，利用圖像提供的警報並刷新帶有剛剛插入的新元素的UI。

的紅色一個呼叫addNoteMic（）和物品被從語音識別立刻插入，但不可見的。我必須與UI交互，以顯示他們，就像我的應用程序不刷新從異步變化功能。但是數據肯定存在，console.log在chrome控制檯上打印的很好。

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

希望它現在更清晰，併爲我的小英文抱歉。

PS：更新第一個郵政編碼，評論推送日期不更新UI的位置。

有什麼問題？ Thx有優勢。

來源

2016-08-03 mosca90

請檢查[這個答案]（http://stackoverflow.com/questions/38174997/angular-2-ionic-2-detect-if-an-object-was-modified/38180523#38180523）。你可以將元素的'push'包裝在一個區域內，比如'this.ngZone.run（（=）=> {// push the new item ...}）;' – sebaferreras

增加了一些信息，現在將嘗試使用你的鏈接，真的很沮喪。 – mosca90

@sebaferreras，它像一個魅力，真正thx男人工作。 – mosca90

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

來源

2016-08-04 07:57:04 mosca90

ionic2 - 異步函數不更新厄運/ UI

回答

相關問題