自动完成不过滤列表项

Question

我希望user32.lib字段具有自动完成选项，因为列表中的项目是如此之多，以至于用户有时会因滚动和滚动而得罪。 当前的代码有两个问题。

首先是输入框看起来不错，但是无论我输入什么内容，都不会从列表中过滤掉

第二个是我的county对象具有两个属性county和countyId，当我从列表中选择县时，它显示的是countyName而不是名称，因为它是绑定的与ID。如何更改它，以便显示名称并仍与ID绑定，因为我需要将ID发送到服务器。

这是我的html

countyId

这是我的<mat-form-field appearance="outline" fxFlex="50" class="pr-4"> <!-- <mat-label>County</mat-label> --> <input type="text" placeholder="select county" name="" matInput [formControl]="countyId" [matAutocomplete]="auto"> <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete"> <mat-option *ngFor="let county of counties" [value]="county.countyId"> {{county.name}} </mat-option> </mat-autocomplete> <!-- <mat-select formControlName="countyId"> <mat-option *ngFor='let county of counties' [value]="county.countyId"> {{county.name}} </mat-option> </mat-select> --> </mat-form-field> 文件代码

ts

图片以便更好地理解

Answer 1

您应该在模板中使用对象而不是单个属性：

<mat-form-field appearance="outline" fxFlex="50" class="pr-4">
    <input type="text" placeholder="select county" name="country" matInput [formControl]="country" [matAutocomplete]="auto">

    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn">
        <mat-option *ngFor="let countryof countries" [value]="country">
            {{country.name}}
        </mat-option>
    </mat-autocomplete>

</mat-form-field>

并像我在这里一样添加您的组件函数displayFn（）：

displayFn(country?: Country): string | undefined {
    return country? country.name : undefined;
  }