Question

我有一个自动完成框，可产生正确的自动完成信息，如果我按下键盘并输入，它将正确选择该选项；但是，如果我单击列表，则该选择不会填充在文本框中。是否缺少允许单击列表的内容？

这是HTML：

<mat-form-field>
<input type="text" placeholder="Company" matInput [formControl]="companyControl" [matAutocomplete]="autoClient" (focusout)="clearClients()">
<mat-autocomplete #autoClient="matAutocomplete">
  <mat-option *ngIf="isLoadingClients" class="is-loading">Loading...</mat-option>
  <ng-container *ngIf="!isLoadingClients">
  <mat-option *ngFor="let option of filteredClients" [value]="option.companyName">
    {{option.companyName}}
  </mat-option>
  </ng-container>
</mat-autocomplete>

这是相关的TS：

this.companyControl.valueChanges
  .pipe(
    debounceTime(50),
    tap(() => {
      this.errorMsgClients = "";
      this.filteredClients = [];
      this.isLoadingClients = true;
    }),
    switchMap(value => this.clientService.getFilteredClient(value)
      .pipe(
        finalize(() => {
          this.isLoadingClients = false;
        })
      )
    )
  )
  .subscribe((data: IClient[]) => {
    if (data) {
      this.errorMsgClients = "";
      this.filteredClients = data.filter(client => { return client.companyName });
    } else {
      this.errorMsgClients = data['Error'];
      this.filteredClients = [];
    }
  });

Answer 1

*如果您想了解您的问题，我还是无法正确回答您的问题，请让我知道，以便我可以根据该问题更新我的问题*

<mat-form-field>
<input type="text" placeholder="Company" matInput [formControl]="companyControl" [matAutocomplete]="autoClient" (focusout)="clearClients()">
<mat-autocomplete #autoClient="matAutocomplete" (optionSelected)='getSelectedValue("$event.option.value)'>
  <mat-option *ngIf="isLoadingClients" class="is-loading">Loading...</mat-option>
  <ng-container *ngIf="!isLoadingClients">
  <mat-option *ngFor="let option of filteredClients" [value]="option.companyName">
    {{option.companyName}}
  </mat-option>
  </ng-container>
</mat-autocomplete>





this.companyControl.valueChanges
  .pipe(
    debounceTime(50),
    tap(() => {
      this.errorMsgClients = "";
      this.filteredClients = [];
      this.isLoadingClients = true;
    }),
    switchMap(value => this.clientService.getFilteredClient(value)
      .pipe(
        finalize(() => {
          this.isLoadingClients = false;
        })
      )
    )
  )
  .subscribe((data: IClient[]) => {
    if (data) {
      this.errorMsgClients = "";
      this.filteredClients = data.filter(client => { 

                   this.companyControl.patchValue(client.companyName); /// if this not working please try below 
                   return client.companyName 
            });
    } else {
      this.errorMsgClients = data['Error'];
      this.filteredClients = [];
    }
  });

喜欢这样

getSelectedValue(value:string){
  this.companyControl.patchValue(value);
}

角材料自动完成单击列表不起作用

1 个答案: