Question

在运行我的功能后，我不知道如何清除我的两个输入字段。我正在使用模型构造函数来提供和添加数据到应用程序。我是角色的新手，所以如果有人能告诉我重置输入字段的方法......这就是代码

非常感谢帮助

数据模型

export class Model {

    items;

    constructor() {

    this.items = [new TodoItem("Buy Flowers", '3days', false),
    new TodoItem("Get Shoes", '1days', false),
    new TodoItem("Collect Tickets", '5days', false),
    new TodoItem("Call Joe", 'today', false)]

}
}
    export class TodoItem {

        action;
        time;
        done;

        constructor(action, time, done) {
        this.action = action;
        this.time = time;
        this.done = done;

        }
        }

COMPONENT

title = 'Welcome';
  model = new Model();
  todoText;

  getItems(){
    return this.model.items;
  }

  delItems(){
    this.model.items =  this.model.items.filter(item => !item.done)

    }

    addItem(newItem, time) {
      if (newItem != "") {
      this.model.items.push(new TodoItem(newItem, time, false));

AND TEMPLATE

<h1>
  {{title}}!
  </h1>
  <input class="form-control" #todoText />
  <input class="form-control" #timeText />
  <button class="btn btn-primary m-t-1" (click)="addItem(todoText.value, timeText.value)">
  AddItem
  </button>
  <table class="table table-striped table-bordered">
    <thead>
    <tr><th></th><th>Description</th><th>Done</th></tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of getItems(); let i = index" >
    <td>{{ i + 1 }}</td>
    <td>{{ item.action }}</td>
    <td>{{ item.time }}</td>
    <td><input type="checkbox" [(ngModel)]="item.done" /></td>
    <td [ngSwitch]="item.done">
    <span *ngSwitchCase="true">Yes</span>
    <span *ngSwitchDefault>No</span>
    </td>
    </tr>
    </tbody>
    </table> 
    <button (click)='delItems()'>Remove</button>

Answer 1

在你的Compponent中：

todoText:string='';
timeText:string='';

 addItem(newItem, time) {
    if (newItem != "") {
      this.model.items.push(new TodoItem(newItem, time, false));
    }
    this.todoText='';
    this.timeText=''
}

在你的HTML中

<input class="form-control" [(ngModel)]="todoText" />
<input class="form-control" [(ngModel)]="timeText" />
<button class="btn btn-primary m-t-1" (click)="addItem(todoText, timeText)">
   AddItem
</button>

在Angular中运行我的函数后如何清除输入字段

1 个答案: