无法将 Autocomplete 的 mat-option 包装在 TemplateRef 中

Question

我创建了一个组件，它基本上是材质自动完成的包装器。我希望能够将一个可选值TemplateRef作为组件的输入（optionTemplate）。如果定义了模板，它将覆盖用于自动完成<mat-option>元素的默认模板。我将 ang-container与 a 一起使用TemplateOutlet，但自动完成面板不会显示，除非我还在mat-option下放置了一个元素mat-autocomplete。

谁能告诉我为什么这不起作用？有什么办法让它按预期工作吗？

我创建了这个StackBlitz 来演示这个问题。

自动完成.component.html

<mat-form-field>
  <input #input matInput type="text" class="form-control" [matAutocomplete]="autocomplete" (input)="valueChanged($event)" [readonly]="readonly"
    (focus)="$event.target.select()" (blur)="onTouched()">
  <mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="displayFunction" (optionSelected)="onOptionSelected($event)">
    <ng-container *ngTemplateOutlet="optionTemplate ? optionTemplate : defaultOptionTemplate; context: { options: filteredOptions }"></ng-container>

    <!-- The autocomplete panel does not show if this line is commented out --->
    <mat-option></mat-option>

  </mat-autocomplete>
</mat-form-field>

<ng-template #defaultOptionTemplate let-options="options">
  <mat-option *ngFor="let option of options" [value]="option">
      {{ displayFunction(option) }}
  </mat-option>
</ng-template>

Answer 1

我相信这是 Angular Material 的一个错误，因为我在 8.x 版本中也遇到了同样的问题。

我分叉了你的演示并创建了错误报告https://github.com/angular/components/issues/18353