清除按钮不会重置角度 6 下拉列表中的选定值答案

【问题标题】：Clear button is not resetting the selected values in dropdown in angular 6清除按钮不会重置角度 6 下拉列表中的选定值
【发布时间】：2018-10-12 10:55:43
【问题描述】：

我的页面上有 2 个下拉菜单，当我点击清除按钮时我想清除它们。如果我遗漏了什么，有人可以看看下面的代码并帮助我。如果这是非常明显的事情，那么很抱歉。提前致谢！

清除按钮的代码如下所示

   <form name="myform" #f="ngForm" novalidate>
    <fieldset>
      <div class="tab-content">
        <div ng-if="paramId == jobExecution" id="jobExecution" class="tab-pane in active">
          <div style='text-align: left'><h6>Enter Data </h6></div>
          <div class="space"></div>
            <div class="row">

              <div class="col-xs-12 col-sm-3">
                  <div class="form-group">
                      <label for="form-field-8" >Select a value</label>
                      <select class="form-control" id="form-field-select-1" name="study" [(ngModel)]="jobExecDetails.study" >
                          <option value="" >Select an option</option>
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                      </select>
                  </div>
              </div>

              <div class="col-xs-12 col-sm-3">
                  <div class="form-group">
                      <label for="form-field-8">Select Domain</label>
                      <select class="form-control" id="form-field-select-1" name="domain" [(ngModel)]="jobExecDetails.domain">
                          <option value="" >Select an option</option>
                          <option value="1">Domain 1</option>
                          <option value="2">Domain 2</option>
                          <option value="3">Domain 3</option>
                          <option value="4">Domain 4</option>
                      </select>
                  </div>
              </div>

              <div class="col-xs-12 col-sm-6">
                  <div class="form-group">
                    <br><br>
                      <button (click)="submit(jobExecDetails)" class="btn btn-default">Submit</button>
                      &nbsp;&nbsp; &nbsp;&nbsp;<button class="btn btn-inverse"
                      (click)="reset(jobExecDetails)">Clear</button>
                  </div>
              </div>

            </div>
        </div>
      </div>
    </fieldset>
  </form>

And in my component.ts file, the function looks like this



 public reset(jobExecDetails): void {
    this.jobExecDetails = '';
    this.view = '';
  }

【问题讨论】：

标签： angular user-interface dropdown angular2-forms

【解决方案1】：

由于您将选择绑定到 this.jobExecDetails.domain 和 this.jobExecDetails.study，因此您必须在重置方法中重新设置这些属性：

所以

this.jobExecDetails.domain = "";
this.jobExecDetails.study = "";

会做你想做的事。这里更清楚的是 Stackblitz：https://stackblitz.com/edit/angular-f6j8q6?file=src%2Fapp%2Fapp.component.ts

【讨论】：

【解决方案2】：

尝试单独设置这些值。像这样：

public reset(jobExecDetails): void {
    this.jobExecDetails.study = "";
    this.jobExecDetails.domain = "";
    this.view = ''; 
  }

【讨论】：

【解决方案3】：

你可以试试这个

 public reset(jobExecDetails): void {
    this.jobExecDetails.domain = '';
    this.jobExecDetails = Object.assign({}, this.jobExecDetails);
  }

【讨论】：