与[displayWith]一起使用时，autocomplete不显示初始值

与[displayWith]一起使用时，autocomplete不显示初始值是因为[displayWith]是Angular Material中的一个指令，用于自定义如何显示选项的文本。当使用[displayWith]时，autocomplete组件将使用指定的函数来显示选项的文本，而不是默认的选项对象的toString()方法。

然而，autocomplete组件的初始值是根据选项对象的值来确定的，而不是根据显示的文本。因此，当使用[displayWith]时，autocomplete组件无法正确显示初始值。

解决这个问题的方法是在使用[displayWith]时，同时使用[ngModel]指令来绑定初始值。[ngModel]指令可以将初始值绑定到组件的模型中，从而确保初始值正确显示。

以下是一个示例代码：

<mat-form-field>
  <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" [ngModel]="selectedOption">
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let option of filteredOptions" [value]="option">
      {{ option.name }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

在上面的代码中，[ngModel]="selectedOption"将初始值绑定到了selectedOption变量上。同时，[displayWith]="displayFn"指定了自定义的显示函数displayFn。

在组件的代码中，需要定义displayFn函数来返回选项的文本。例如：

displayFn(option: any): string {
  return option ? option.name : '';
}

这样，当使用[displayWith]时，autocomplete组件将正确显示初始值。

关于腾讯云相关产品，腾讯云提供了云服务器（CVM）、云数据库（CDB）、云存储（COS）等一系列云计算产品，可以满足各种应用场景的需求。具体产品介绍和链接地址可以参考腾讯云官方网站：https://cloud.tencent.com/