Question

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

型ahead.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>

type-ahead.component.ts（选择功能）

private selectedItem(evt: Event): void {

    this.hasData = true;

    //return object from typeahead data that matches column value
    let selectedItem: TypeAheadModel = this.typeAheadSearchData.find(x => {

      return x.partyId === evt['item'].partyId;
    })

    try {
      //emit service event that will be listened by other components
      this.selectedTypeAheadItem.emit(selectedItem);
      this.typeAheadEventService.typeAheadChangeEvent(selectedItem);


    } catch (err) {
      throw "TypeAhead Selected Item Error" + err;
    } finally {
      this.typeAheadForm.reset();
      this.clearTypeAheadField();
    }

  };

clearTypeAheadValues（）

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

Answer 1

虽然clearTypeAheadValues()的实现并未包含在问题中，但我认为输入未被清除，因为其值已绑定到名为{{1}的FormControl }。

要重置价值，我的直觉就是在typeAheadField clearTypeAheadValues()内实施以下内容。

Answer 2

问题在于您没有告诉Typeahead不执行其默认行为（将模型替换为选定的项。）

所以您需要这样做：

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

选择并清除后模型中的组件保持值

2 个答案: