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

Question

我创建了一个组件，它基本上是 Material 自动完成的包装器。我希望能够采取可选的 TemplateRef作为组件的输入 ( optionTemplate )。如果定义了模板，它将覆盖用于自动完成的默认模板 <mat-option>元素。我用ng-container与 TemplateOutlet ，但自动完成面板不会显示，除非我还输入了 mat-option mat-autocomplete下的元素.

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

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

autocomplete.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 版本中也遇到了同样的问题。

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