angular - 清除按钮未重置 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

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