通過單擊自動完成材料選擇

Question

我實現了自動完成功能，自動完成功能可以通過按 Enter 接收建議和選擇建議。 但是，單擊選項時，選項會消失而不進行選擇。

我已嘗試向選項添加 (click) 和其他綁定，但也未調用這些方法。 有沒有人知道使用 enter 來選擇有效而點擊無效的原因是什么。

  <mat-form-field class="name" appearance="outline">
<input (change)="competenceChange()" placeholder="Competence name" matInput [(ngModel)]="competencePart.name"
  (ngModelChange)="this.competenceNameUpdate.next($event)" autocomplete="off" [matAutocomplete]="autoComplete">

<mat-autocomplete autoActiveFirstOption #autoComplete="matAutocomplete">
  <mat-option *ngFor="let proposal of competenceProposals" [value]="proposal">
    {{ proposal }}
  </mat-option>
</mat-autocomplete>

  ngOnInit(): void {
// Use the set debounce time to delay the execution of the search query.
// Every keypress resets the delay timer.
this.competenceNameUpdate.pipe(
  debounceTime(this.textboxInputDebounceTimeMS),
  distinctUntilChanged())
  .subscribe(value => {
    this.obtainAutocompleteProposals(value);
  });


  private obtainAutocompleteProposals(value: string): void {
if (this.competencePart.name.trim() === '') { this.competenceProposals = []; return; }
this.competenceService.GetCompletionProposals(
  this.competencePart.type.valueOf(),
  value,
  response => {
    this.competenceProposals = response.completionProposals;
  },
  failure => {
    console.error(failure);
  });

實現支持這里使用的回調實現是很重要的，因為這是我們生成服務的方式。

Answer 1

您可以在此StackBlitz 鏈接中找到完整的示例

在模板文件中像這樣輸入...

<input matInput placeholder="Select State" aria-label="State" 
                    [matAutocomplete]="auto" [formControl]="stateCtrl" (click)="getStates()">

你的自動完成是..

<mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let state of filteredStates | async" [value]="state">
            <span>{{ state }}</span>
        </mat-option>
</mat-autocomplete>