Question

当我在其中添加“文字转语音”功能时，我的应用会出错。不知道出了什么问题，在将文字添加到语音之前，代码工作正常......

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { TextToSpeech } from '@ionic-native/text-to-speech' 
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { MaintabsPage } from '../pages/maintabs/maintabs';
import { InfoPage } from '../pages/info/info';
import { SurahPage } from '../pages/surah/surah';
import { SurahSummaryPage } from '../pages/surah-summary/surah-summary';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    MaintabsPage,
    InfoPage,
    SurahPage,
    SurahSummaryPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    FormsModule,
    ReactiveFormsModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    MaintabsPage,
    InfoPage,
    SurahPage,
    SurahSummaryPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    TextToSpeech
  ]
})
export class AppModule {}

然后我的html代码在下面提到......

<ion-header>
  <ion-navbar primary>
    <ion-title>{{surah.name}}</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
      <div text-center>
        <h1>{{surah.name}}</h1>
      </div>
      <div text-wrap style="font-size: 1.5rem" [(ngModel)]="text">{{surah.details}}</div>
            <button clear ion-button (click)="sayText()">Text to Speak</button> 

</ion-content>

然后我的打字稿代码是..

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {TextToSpeech} from '@ionic-native/text-to-speech' 

@IonicPage()
@Component({
  selector: 'page-surah-summary',
  templateUrl: 'surah-summary.html',
})
export class SurahSummaryPage {

  surah: any;
  text: string;

  constructor(private tts: TextToSpeech, private nav: NavController, private navParams: NavParams) {
    this.surah = this.navParams.data;
    //console.log('**navparams:', this.navParams)
  }

  async sayText():Promise<any>{
          try {
            await this.tts.speak(this.text);
            console.log("Successfully Spoke" + this.text)
          } 
          catch (e) {
            console.log(e);
          }
  }

  // ionViewDidLoad() {
  //   console.log('ionViewDidLoad SurahSummaryPage');
  // }

}

我收到以下错误...

运行时错误未捕获（在承诺中）：错误：没有带有未指定名称属性的表单控件的值访问器错误：在_throwError中没有指定名称属性的表单控件的值访问器

(http://localhost:8100/build/vendor.js:23002:11) at setUpControl (http://localhost:8100/build/vendor.js:22912:9) at NgModel._setUpStandalone (http://localhost:8100/build/vendor.js:25477:9) at NgModel._setUpControl (http://localhost:8100/build/vendor.js:25463:37) at NgModel.ngOnChanges (http://localhost:8100/build/vendor.js:25394:18) at checkAndUpdateDirectiveInline (http://localhost:8100/build/vendor.js:11171:19) at checkAndUpdateNodeInline (http://localhost:8100/build/vendor.js:12597:17) at checkAndUpdateNode (http://localhost:8100/build/vendor.js:12536:16) at debugCheckAndUpdateNode (http://localhost:8100/build/vendor.js:13239:59) at debugCheckDirectivesFn (http://localhost:8100/build/vendor.js:13180:13)
Stack
Error: Uncaught (in promise): Error: No value accessor for form control with unspecified name attribute
Error: No value accessor for form control with unspecified name attribute
    at _throwError (http://localhost:8100/build/vendor.js:23002:11)
    at setUpControl (http://localhost:8100/build/vendor.js:22912:9)
    at NgModel._setUpStandalone (http://localhost:8100/build/vendor.js:25477:9)
    at NgModel._setUpControl (http://localhost:8100/build/vendor.js:25463:37)
    at NgModel.ngOnChanges (http://localhost:8100/build/vendor.js:25394:18)
    at checkAndUpdateDirectiveInline (http://localhost:8100/build/vendor.js:11171:19)
    at checkAndUpdateNodeInline (http://localhost:8100/build/vendor.js:12597:17)
    at checkAndUpdateNode (http://localhost:8100/build/vendor.js:12536:16)
    at debugCheckAndUpdateNode (http://localhost:8100/build/vendor.js:13239:59)
    at debugCheckDirectivesFn (http://localhost:8100/build/vendor.js:13180:13)
    at c (http://localhost:8100/build/polyfills.js:3:13535)
    at Object.reject (http://localhost:8100/build/polyfills.js:3:12891)
    at Tab.NavControllerBase._fireError (http://localhost:8100/build/vendor.js:43269:16)
    at Tab.NavControllerBase._failed (http://localhost:8100/build/vendor.js:43257:14)
    at http://localhost:8100/build/vendor.js:43312:59
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9283)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:4508:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9223)
    at r.run (http://localhost:8100/build/polyfills.js:3:4452)
    at http://localhost:8100/build/polyfills.js:3:14

Answer 1

<div>标签可以通过[（ngModel）]进行操作，您需要为其创建<input>标签。如下：

<div text-wrap style="font-size: 1.5rem">{{surah.details}}</div>
//here
<ion-input [(ngModel)]="surah.details" type="text">
<button clear ion-button (click)="sayText()">Text to Speak</button>

Answer 2

您似乎不允许用户在您的html中输入或更新数据。因为您要发送surah.details .. 在Vega中的answer建议的html中，删除ngModel

 <div text-wrap style="font-size: 1.5rem" >{{surah.details}}</div>
            <button clear ion-button (click)="sayText()">Text to Speak</button>

在你的ts文件中发送你在构造函数中设置的this.surah.details，

 async sayText():Promise<any>{
          try {
            await this.tts.speak(this.surah.details);
            console.log("Successfully Spoke" + this.surah.details)
          } 
          catch (e) {
            console.log(e);
          }
  }

离子文本到语音问题投掷运行时错误

2 个答案: