ionic2

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。

初始化后(recognition = new SpeechRecognition())就可以使用了。 recognition.start()开始识别，识别结束后，在recognition.onresult事件中可以抓到结果，可在 event.results[0][0].transcript 中访问（我要的是单个结果，这就是 [0][0]).[=16 的原因=]

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

Application

blue 一次调用 addNoteKeyboard() 和项目被插入并立即可见，使用图像中提供的警报并刷新 UI 刚刚插入的新元素。

red 一次调用 addNoteMic() 和项目立即从语音识别中插入，但不可见..我必须互动用 UI 来显示它们，就像我的应用程序在从异步函数更改时没有刷新一样。但是数据肯定存在，console.log 在 chrome 控制台上打印很好。

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

希望现在更清楚了，抱歉我的英语不好。

PS：先更新post代码，在推送日期不更新UI的地方注释掉了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 - 异步函数不更新厄运 / UI

ionic2 - async function does not update the doom / UI

angularjs

typescript

ionic-framework