Question

是否有任何方法可以确定在自动填充组件中选择了哪个选项，以便当用户按Tab键时，我选择该选项而不是更改该字段的焦点。

这是我的代码：

<div class="search-box">
  <i class="material-icons">search</i>
  <input #inputText 
    mdInput 
    [mdAutocomplete]="issuingAsset" 
    [attr.maxlength]="15" 
    [(ngModel)]="assetSearch" 
    (input)="inputText.value=$event.target.value.toUpperCase()"
    (keydown.tab)="onSearchByAsset()"
    (keyup)="onAutoCompletAsset(assetSearch)">
    <md-autocomplete #issuingAsset="mdAutocomplete" >
      <div>
        <md-option
        (onSelectionChange)="selectAsset(asset.symbol)"
        *ngFor="let asset of filteredAssets" 
        [value]="asset.symbol">
          <div class="text-auto-complete"> {{ asset.symbol}} - {{asset.company}}</div>
        </md-option>
    </div>
  </md-autocomplete>
</div>

Answer 1

由于你没有粘贴任何代码，我分享了一个我刚刚使用的例子......

  <mat-form-field>
    <input type="text" #selectFilter [(ngModel)]="concept" name="concept" placeholder="Concept" aria-label="Concept" matInput [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let concept of conceptsArrFiltered" [value]="concept.Id">
        {{ concept.Id }} - {{ concept.Desc }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

因此，所选值将保存在this.concept中，因为这是ngModel绑定到[(ngModel)]="concept"的位置，我们在[value]="concept.Id"时分配此值。

我不确定这是否能回答你的问题...我帮你做对了吗？

在Angular Material自动完成组件中标识所选选项

1 个答案: