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

我可以正确地从 event.results [0] [0] .transcript 中看到控制台中的输出，但当我尝试将其推送到我的列表时屏幕上没有任何内容。我必须使用设备上的UI做一些事情才能神奇地显示结果，例如新的注册或新的键盘插入。

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

初始化后（识别=新的SpeechRecognition（）），您可以使用它。 recognition.start（）开始识别，当识别结束时，在 recognition.onresult 事件中，您可以捕获结果，这些结果可在 event.results中访问[ 0] [0] .transcript （我要求单个结果，这就是为什么[0] [0]）。

在我的应用程序中，有2个按钮：

Application

蓝色一次调用 addNoteKeyboard（），并使用图片中提供的警告立即插入并显示项目，并使用刚刚插入的新元素刷新UI。 / p>

红色一次调用 addNoteMic（），项目立即从语音识别中插入，但不可见..我必须与用户界面进行互动以显示它们，就像我的应用程序在从异步功能更改时没有刷新。但数据确实存在，console.log在chrome console上打印很好。

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

希望现在更清楚，对不起我的小英语。

PS：更新第一个帖子代码，评论推送日期不会更新UI的位置。

问题是什么？这是有利的。

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

ionic2 - async函数不会更新doom / UI

1 个答案: