如何在数组上按项目后清除输入字段?

use*_*513 0 javascript angularjs ionic2 angular2-routing angular

我做了一个角度2的简单例子.我在数组中添加了项目.当用户键入任何内容并按下按钮时,它将被添加到数组中并显示在列表中.

我面临两个问题

  • 1)如何在插入数组后清除输入字段?
  • 2)角度2如何工作?如在文档Angular 2中删除监视.当项目添加到数组.how模板显示更新列表.how?

    是在看列表模型吗?

这是我的plunker代码

<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>
Run Code Online (Sandbox Code Playgroud)

Par*_*ain 6

您可以在click事件中清除函数中的值,如下所示: -

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

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

</ion-footer-bar>
Run Code Online (Sandbox Code Playgroud)

Working Plunker