角2 - 清除輸入值的onclick

我正在寫一個簡單的角度2頁與recepies和配料交易。我有兩個輸入fiels其中用戶可以輸入一個成份名稱，這將稍後將被添加到陣列中的值。我看過的GUID是展示瞭如何做我需要但正如你將在下面看到我所基於的GUID閱讀不會工作。現在我有三個按鈕：'添加' - 添加成分到列表（數組），'刪除' - 從列表（數組）刪除成分，'清除' - 清除輸入字段中的輸入值。角2 - 清除輸入值的onclick

預期結果：當按下「清除」按鈕時，裏面兩個輸入字段應該cleard的值。但它不是。

這是我的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; 
    } 

}

編輯：一個額外的事情。我不知道爲什麼，但與此代碼在我的程序上面的輸入框和按鈕裏面的名字標題已經消失，當我寫內部的輸入字段中的一個字符會纔會出現。

來源

2017-09-21 MetaDude

正好被設置爲empty string，而不是null

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

來源

2017-09-21 13:18:53 Sajeetharan

試過了，不到風度工作。我的代碼中的其他東西是否正常？我的意思是我寫方法'clear（）'的方式，以及我如何將它分配給按鈕？ – MetaDude

耶看起來不錯 – Sajeetharan

如果你想使用ngModel內部形狀，必須name屬性設置爲輸入標籤。

<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" name="first" 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" name="second" 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>

來源

2017-09-21 21:30:48 diabolique

角2 - 清除輸入值的onclick

回答

相關問題