将项目推入数组后如何清除输入字段？

Question

我做了一个简单的例子 angular 2.我在数组中添加了item。当用户键入任何内容并按下按钮时，它会被添加到数组中并显示在列表中。

我面临两个问题

1 ) 如何在输入到数组后清除输入字段？
2) angular 2 是如何工作的？如文件 Angular 2 删除手表 .So 当项目添加到数组中时。模板如何显示更新列表。如何？

是在看list的型号吗？

<ion-navbar *navbar>
  <ion-title>
    Ionic 2
  </ion-title>
</ion-navbar>

<ion-content class="has-header">
 <ion-list style="border:2px solid grey;height:500px">
  <ion-item *ngFor="#item of Todo">
{{item.name}}
  </ion-item>
</ion-list>
<label class="item item-input">
  <span class="input-label" >Add Todo</span>
  <input type="text" #todo placeholder="Add todo" >
</label>
</ion-content>

<ion-footer-bar (click)="addItem(todo.value)">

  <h1 class="title" style='color:red'>Add Todo!</h1>

</ion-footer-bar>

Answer 1

您可以通过执行以下操作来清除输入字段。

Home.html

前一个代码

<ion-footer-bar (click)="addItem(todo.value)">

  <h1 class="title" style='color:red'>Add Todo!</h1>

</ion-footer-bar>

更改代码

<ion-footer-bar (click)="addItem(todo)">

  <h1 class="title" style='color:red'>Add Todo!</h1>

</ion-footer-bar>

修改home.ts中的addItem函数，如下所示。

addItem(v){
      this.Todo.push({name:v.value})
      v.value='';
    }

希望这能为您解决所面临的问题。还有很多其他方法。既然你是从id中获取值，我就以此为基础给出了解决方案。

updated plunker code below

http://plnkr.co/edit/oCxrgxNlCkjVnTrhZGQA?p=preview

删除问题的答案。

而不是这个

deleteTodo(obj){
      alert('----');
      var index =  this.Todo.indexOf(obj);
  this.Todo.splice(index, 1); 
    }

关注这个

    deleteTodo(name){
      var index =  this.Todo.indexOf(name);
  this.Todo.splice(index, 1); 
    }

希望对您有所帮助。

Answer 2

除了清除函数中的值，您还可以像这样对单击事件执行操作：-

<ion-footer-bar (click)="addItem(todo.value);todo.value = ''">

  <h1 class="title" style='color:red'>Add Todo!</h1>

</ion-footer-bar>

Working Plunker

将项目推入数组后如何清除输入字段？

how to clear input field after pushing item on array?

javascript

angularjs

ionic2

angular2-routing

angular