Angular 选择并清除后模型中的零部件保持值

我这里有一个组件，当你输入一个名字时，会出现一个名字的下拉列表。您选择名称并将其转到下面的多列表，然后我们希望清除输入框。所以我们运行clear函数。它失败了。但是，如果我们只是正常地清除输入，它就会工作。所以，我们有点困难。代码如下。如果需要更多的样品，请告诉我

提前键入.component.html

  <div id="typeAheadContainer" class="container">
  <div class="col-md-3 mb-3">
    <label for="" class="d-inline" *ngIf="showTitle">{{title}}</label>
    <button type="button" [disabled]="!hasAccentedCharacters" [ngClass]="{'disable-btn-icon':!hasAccentedCharacters, 'enable-btn-icon':hasAccentedCharacters}"
      class="btn-icon fa fa-globe fa-2x d-inline" (click)="openAccentedCharacterModal()">
    </button>
  </div>
  <span class="row" *ngIf="searching">Searching...</span>
  <div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
  <div class="row mt-2">
    <div class="col-md-10">
      <form [formGroup]="typeAheadForm" novalidate>
        <ng-template #rt let-r="result" let-t="term">
          <ngb-highlight [result]="r.typeAheadDisplayName" [term]="t"></ngb-highlight>{{ r.metaData }}
        </ng-template>
        <input
            #typeAheadField
            formControlName="typeAheadField"
            id="typeAheadField"
            type="text"
            class="form-control"
            [focusFirst]="false"
            [ngbTypeahead]="nameSearch"
            [class.is-invalid]="searchFailed"
            (selectItem)="selectedItem($event)"
            (focus)="typeAheadFocusSubject.next($event.target.value)"
            placeholder="{{placeHolderText}}"
            [resultTemplate]="rt"
            [inputFormatter]="formatter"
        />
      </form>
    </div>
    <div class="col-md-2">
      <div class='btn-group btn-group-sm'>
        <button #clearBtn id="clearBtn" type='reset' class='btn btn-secondary btn-sm'
                (click)="clearTypeAheadValues($event, clearBtn)" [disabled]="!hasData">Clear
        </button>
      </div>
      <div class="row-md-2" *ngIf="showTitle">
        <div class='btn-group btn-group-sm'>
          <button #addBtn id="addSameNameBtn" type='add' class='btn btn-secondary btn-sm'
                  (click)="addSameNameValues()" [disabled]="!hasData">Add Same Name
          </button>
        </div>
      </div>
    </div>
  </div>
  <div >
    <!-- <c2c-type-ahead-name-listing></c2c-type-ahead-name-listing> -->
  </div>

</div>

clearTypeAheadValues（）

---

虽然问题中没有包括

clearTypeAheadValues（）

的实现，但我认为输入没有被清除，因为它的值绑定到名为

typeAheadField

的FormControl

---

要重置该值，我的直觉是在

clearTypeAheadValues（）

内部实现以下操作：

typeAheadForm.get（'typeAheadField'）。重置（null）

问题在于您没有告诉Typeahead不要执行其默认行为（用所选项替换模型）

所以你需要做：

selectedItem(evt: Event): void {
   evt.preventDefault();

---

只是尝试了一下，结果失败了。仍然在野外闲逛。出于某种原因，

reset（）

过去对我很挑剔。下面的方法有效吗

typeAheadForm.get（'typeAheadField'）.setValue（null）

.nope。。。天啊。。。。这怎么这么难。订阅触发会有什么问题吗？好的，我的最后一个想法是使用上述方法重置FormControl，并使用

nameSearch.next（[]）

更改

ngbTypeahead

的可观察值。

  public clearTypeAheadValues(evt: MouseEvent, clearnBtn: HTMLElement): void {
    evt.preventDefault();
    this.clearTypeAheadField();
    this.typeAheadEventService.clearTypeAheadFields();
    this.typeAheadForm.get('typeAheadField').reset();
    this.hasData = false;
  };

selectedItem(evt: Event): void {
   evt.preventDefault();