时间戳

首页 > 解决方案 > 单击搜索选项时，角度自动完成返回一个空字段

html - 单击搜索选项时，角度自动完成返回一个空字段

问题描述

input问题是，当我通过在字段中键入字符来搜索用户列表并mat-autocomplete找到搜索的用户时，在我单击它以选择该用户后，该input字段变为空而不是显示所选用户。

这是我的 HTML 代码：

<div class="material-input">
      <mat-form-field class="form-group">
        <input id="userNameInput" matInput placeholder="Search user name" formControlName="userName" for="search-box"
          #searchBox id="search-box" (input)="search(searchBox.value)" [matAutocomplete]="auto">
        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
          <mat-option *ngFor="let username of mockLdap | async" [value]="username">
            {{username.userName}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </div>

标签： htmlangular

解决方案

您必须[value]="username.userName"相应地设置您的选项。

<div class="material-input">
      <mat-form-field class="form-group">
        <input id="userNameInput" matInput placeholder="Search user name" formControlName="userName" for="search-box"
          #searchBox id="search-box" (input)="search(searchBox.value)" [matAutocomplete]="auto">
        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
          <mat-option *ngFor="let username of mockLdap | async" [value]="username.userName">    <!--- Here you have to set username.UserName -->
            {{username.userName}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
</div>

推荐阅读