angularjs - Angular 2 - 点击时清除输入值

Question

我正在写一个简单的 2 Angular 页面，用于处理收据和配料。我有两个输入字段，用户可以在其中输入成分名称和稍后将添加到数组中的值。我已经阅读了一些指南，这些指南展示了如何执行我需要的操作，但正如您在下面看到的那样，我根据指南阅读的内容将不起作用。

现在我有三个按钮:“添加”- 将成分添加到列表(数组)，“删除”- 从列表(数组)中删除成分，“清除”- 从输入字段中清除输入值。

预期结果:当按下“清除”按钮时，两个输入字段内的值应被清除。但事实并非如此。

这是我的 Html 组件:

<div class="container">
<h2>Shopping List</h2>
    <div class="container">
            <form>
              <div class="form-group col-lg-4 col-md-3">
                <label for="recipeName">{{inputTitleName}}</label>
                <input type="textBox" class="form-control" [(ngModel)]="titleValue" id="recipeName">
              </div>
              <div class="form-group col-lg-2 col-md-3">
                <label for="recipeAmount">{{inputTitleAmount}}</label>
                <input type="textBox" class="form-control" [(ngModel)]="amountValue" id="recipeAmount">
              </div>

            </form>
          </div>

          <div>
                <button class="btn btn-success">{{btnAdd}}</button>
                <button class="btn btn-danger">{{btnDelete}}</button>
                <button class="btn btn-primary" (click)="clear()">{{btnClear}}</button>
              </div>

            <br>  
            <br>

          <ul class="list-group">
            <li class="list-group-item">New <span class="badge">{{sListBadge}}</span></li>
            <li class="list-group-item">Deleted <span class="badge">5</span></li> 
            <li class="list-group-item">Warnings <span class="badge">3</span></li> 
          </ul>
 </div>

这是 ts 组件:

import { Component } from '@angular/core';


@Component({
  selector: 'shoppingList',
  templateUrl: './shoppingList.component.html',
  styleUrls: ['./shoppingList.component.css']
})
export class ShoppingListComponent {

 inputTitleName = "Name";
 inputTitleAmount = "Amount";

 btnAdd = "Add";
 btnDelete = "Delete";
 btnClear = "Clear";

 sListBadge = "6";


 amountValue: string = '';
 titleValue: string = '';

 clear(){
   this.amountValue = null;
   this.titleValue = null;
  }

}

编辑:一件额外的事情。我不知道为什么，但是使用我的程序中的这段代码，输入字段上方的标题和按钮内的名称已经消失，并且仅当我在其中一个输入字段中写入字符时才会出现。

Answer 1

只需设置为空字符串而不是null

 clear(){
   this.amountValue = "";
   this.titleValue = "";
 }