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

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)
      )
  }

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

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

Answer 1

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

private teste: string;

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

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

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

请记住，使用 ngmodel 您在变量上所做的任何更改都会反映在您的 html 或 ts 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);
}