代码之家 › 专栏 › 技术社区 › Ashy Ashcsi

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

angular6 parameter-passing angular

Ashy Ashcsi · 技术社区 · 6 年前

我试图将输入字段的值传递给组件类。但它似乎不起作用。请查找以下代码:

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>

  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)

我使用角度材质框架来渲染元素。有人能告诉我我做错了什么吗?

谢谢

3 回复 | 直到 6 年前

Artem Arkhipov user1682140 6 年前

尝试添加 #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>

-1

Kelvin Santiago 6 年前

在元素中使用#todo:

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

使用方法:

{{ todo.value }}

-1

bgraham 6 年前

我认为更容易使用的另一种方法是有一个支持字段并绑定到它:

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>

todo = '';

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

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

这样做更容易验证他们输入的值,并在成功提交后将字段重置为空。

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

Jihed Ben Zarb · 造型角材料日期选择器

5 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

6 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

6 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

6 月前

Jace Johnson · Typescript文件读取的变量类型错误

6 月前

Ole · Angular资源API是否支持为资源添加初始值?

6 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

6 月前