Question

我试图将输入字段的值传递给组件类。但是它似乎没有用。请在下面找到代码：

todoinput.component.html

<mat-card>
  <form>
    <mat-form-field class="example-full-width">
      <input matInput type="text" name="todo" placeholder="Enter a todo">
    </mat-form-field>
    &nbsp; &nbsp;
    <button mat-raised-button color="primary" type="button" (click)="addTodo(todo.value)">Add Todo
    </button>
  </form>
</mat-card>

todoinput.component.ts

  addTodo(text) {
    this._todosService.addTodo({
      text: text,
    }).subscribe((todo) => {
      return this.newTodo.emit(todo);
    })
  }

但是单击按钮会引发以下错误：

ERROR TypeError: Cannot read property 'value' of undefined
    at Object.eval [as handleEvent] (TodoinputComponent.html:7)
    at handleEvent (core.js:10258)

我正在使用角度材质框架来渲染元素。有人可以让我知道我在做什么错吗？

谢谢

Answer 1

尝试将#todo添加到输入中。在那之后，角度应该能够到达正确的输入。没有它，它将获得未定义的变量。

<mat-card>
  <form>
    <mat-form-field class="example-full-width">
      <input #todo matInput type="text" name="todo" placeholder="Enter a todo">
    </mat-form-field>
    &nbsp; &nbsp;
    <button mat-raised-button color="primary" type="button" (click)="addTodo(todo.value)">Add Todo
    </button>
  </form>
</mat-card>

Answer 2

我认为可能更容易使用的替代方法是拥有一个后备字段并绑定到该字段：

html：

<mat-card>   
  <form>
    <mat-form-field class="example-full-width">
      <input [(ngModel)]="todo" matInput type="text" name="todo" placeholder="Enter a todo">
    </mat-form-field>
    &nbsp; &nbsp;
    <button mat-raised-button color="primary" type="button" (click)="addTodo()">Add Todo
    </button>   
  </form> 
</mat-card>

ts

todo = '';

addTodo() {
    if (!this.todo) {
       return;
    }

    this._todosService.addTodo({
      text: this.todo,
    }).subscribe((todo) => {
      this.todo = '';
      return this.newTodo.emit(todo);
    })
  }

通过这种方式，可以更轻松地进行操作，例如验证他们是否输入了值，并在成功提交后将字段重置为空。

Answer 3

在元素中使用#todo：

<input matInput type="text" name="todo" #todo placeholder="Enter a todo">

并使用：

{{ todo.value }}

angular6：将输入字段的值传递给组件

3 个答案: