Question

这时我很沮丧。我有要收集的数据，希望通过Angular组件进行处理。虽然我在HTML输入语句中有一个值名称，但我需要一种方法将该值传递到将在其中使用它的.ts进程。到目前为止，我得到的只是“未定义”。

app.component.html

<div>
  Common Name:
  <input name="commonName" value="">
  <p>
    <button (click)="assignName(commonName)">Submit</button>
    </p>
</div>
<router-outlet></router-outlet>

过程在这里：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  assignName (commonName: string) {
    console.log("value received: " + commonName);
  }

}

运行它时，我会在控制台中看到以下内容：

app.component.ts:11 value received: undefined

如果我在输入中输入测试，然后点击提交，我希望看到输入的值（“测试”）得到报告

Snapshot of run window

Answer 1

在input上创建模板变量，然后在调用value方法时可以使用它的assignName属性。

类似这样的东西：

<div>
  Common Name:
  <input #commonName name="commonName" value="">
  <p>
    <button (click)="assignName(commonName.value)">Submit</button>
    </p>
</div>

这是您推荐的Working Sample StackBlitz。

将“ html输入值”传递给角度处理

1 个答案: