Question

我有一种情况：一个表单，输入后有多个输入和一个按钮：

模板：

<ion-item>
          <ion-label stacked>Test</ion-label>
          <ion-input formControlName="teste" [ngModel]="teste" type="text"></ion-input>
          <button large type="button" (click)="input_to_voice($event)" clear ion-button icon-only item-end>
            <ion-icon name="mic"></ion-icon>
          </button>
        </ion-item>

当我点击按钮时，我想将按功能计算的值自动设置为输入：

 input_to_voice(event, value) {

    //here I wanted to get a reference to the input value, but I'm stuck
    console.log(event.target.parentElement.parentElement);

    let options = {
      language: "en-GB"
    };

    // Start the recognition process
    this.speechRecognition.startListening(options)
      .subscribe(
        (matches: Array<string>) => console.log(matches),
        (onerror) => console.log('error:', onerror)
      )
  }

所以：对于单个输入很容易做到这一点。但是，如何从$event获取多个输入参考并自动设置计算值？

（例如：按第三个输入按钮，该按钮将“知道”哪个输入将设置值）

Answer 1

您只需要在 ngModel 中创建要使用的变量：

private teste: string;

如果输入需要两个不同的值，则只需要创建另一个具有不同名称的变量。

然后你可以在这样的方法中访问它：

input_to_voice() {
    console.log(this.teste);
}

请注意，使用 ngModel 您对变量所做的任何更改都会反映在 html 或 ts 文件中。

修改

然后你可以尝试这样做：

更改输入标记：

<ion-input type="text" #teste></ion-input>

然后进行导入：

import { ViewChild, ElementRef } from '@angular/core';

在你的课程中添加这一行：

@ViewChild('teste') input;

然后你可以从这个方法中访问输入值：

input_to_voice() { console.log(this.input.nativeElement.value); }

Ionic 3 / Angular 4 - 一对输入按钮 - 动态设置输入值

1 个答案: