Estoy tratando de representar una variable llamada "this.text" en mi app.component.html. Puedo cambiar "this.text" a través de una función llamada "recognition.onresult", pero no se muestra ni cambia en la pantalla. La función "recognition.onresult" estaba originalmente en el archivo "speech.ts", pero obtuve mejores resultados con ella en el archivo del componente.

aplicación.componente.html

 <h1>{{text}}</h1>

aplicación.componente.ts

 import { Component, OnInit, OnDestroy } from '@angular/core'; import { SocketService } from "./socket.service"; import recognition from './speech'; ... export class AppComponent implements OnInit, OnDestroy { text:any = 'hi'; public constructor(private socket: SocketService) { } getText(text:any){ console.log(text) this.text = text if (text === "what's today's date"){ alert("none ya") this.text = "None ya" } } ngOnInit(){ recognition.onresult = (event:any) => { // get the results of the speech recognition const resultIndex = event.resultIndex const result = event.results[resultIndex][0].transcript this.getText(result.toString()) // perform actions based on transcript and level of confidence } this.socket.getEventListener().subscribe(event => { recognition.start(); if(event.type == "message") { let data = event.data.content; if(event.data.sender) { data = event.data.sender + ": " + data; } } if(event.type == "close") { } if(event.type == "open") { } }); } ... }

habla.ts

 declare const webkitSpeechRecognition: any; var SpeechRecognition = webkitSpeechRecognition; let recognition = new SpeechRecognition() recognition.lang = "en"; recognition.continuous = true recognition.onstart = function () { // actions to be performed when speech recognition starts console.log(recognition) }; recognition.onspeechend = function () { // stop speech recognition when the person stops talking recognition.stop(); } export default recognition