清除按钮未重置 angular 6 中下拉列表中的选定值

Question

我的页面上有 2 个下拉菜单，我想在点击清除按钮时将其清除。如果我遗漏了什么，有人可以看看下面的代码并帮助我。 angular 的新手，如果这是非常明显的事情，我们深表歉意。提前致谢！

清除按钮代码如下

   <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 = '';
  }

Answer 1

你能试试这个吗

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

Answer 2

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

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

Answer 3

由于您将选择绑定到 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

清除按钮未重置 angular 6 中下拉列表中的选定值

Clear button is not resetting the selected values in dropdown in angular 6

user-interface

dropdown

angular2-forms

angular