如何将语音中的文本呈现为Angular Html

Question

我正在尝试呈现一个名为"this.text"；到我的app.component.html；this.text"；通过一个称为"；recognition.onresult"；但它不会渲染或更改到屏幕上。"；recognition.onresult"；功能最初是在"；语音.ts"；文件，但我在组件文件中得到了更好的结果。

app.component.html

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

app.component.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") {

}
});
}
...
}

演讲.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

Answer 1

如果您的逻辑很好，那么您可以使用ChangeDetectorRef，它将显式标记更改并重新呈现视图。

import { ChangeDetectorRef } from '@angular/core';
...
constructor(private cdr:ChangeDetectorRef) {
...
}

在更新文本后，在getText((函数中使用更改检测。

this.cdr.detectChanges();

这应该反映HTML中的更改。