Question

我正在写一个简单的角度2页，处理收件人和成分。我有两个输入fiels，用户可以在其中输入成分名称，稍后将添加到数组中的值。我已经阅读过guid，它们展示了如何做我需要的东西，但是你会在下面看到我根据guids所读到的东西不会起作用。

现在我有三个按钮：＆＃39;添加＆＃39; - 将成分添加到列表（数组），＆＃39;删除＆＃39; - 从列表（数组）中删除成分，＆＃39;清除＆＃39; - 清除输入字段的输入值。

预期结果：何时清除＆＃39;按下按钮，两个输入字段内的值应该清除。但它没有。

这是我的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

只需设置为 empty string ，而不是 null

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

Answer 2

如果要在表单内使用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>

Angular 2 - 明确输入值onClick

2 个答案: