角材料自动完成内的 ngTemplateOutlet 仅使用默认选项呈现

Question

我正在尝试使用材料自动完成和 ngTemplateOutlet 创建一组自定义模板，以切换我想使用哪个模板来显示结果（例如，如果有分组结果，它们的显示方式将不同于传统的自动完成选项）。

ngTemplateOutlet 似乎仅在提供默认选项时才呈现模板。如果没有至少一个 mat-option 存在，似乎无法将选项直接附加到 mat-autocomplete。理想情况下，唯一呈现的选项是从组件中获取的选项（在一个更复杂的示例中，以下代码很简单，并且仍然复制了问题）。本质上，我正在寻找一种解决方法。

我已经尝试了所有我能想到的关于 ng-container 和模板的变体。

例如，带有模板的

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

这不会呈现任何自动完成选项

<mat-autocomplete #auto="matAutocomplete">
    <ng-container *ngTemplateOutlet="default; context:{options: options}"></ng-container>
</mat-autocomplete>

但是，至少包含一个 mat-option，这会呈现所有这些

<mat-autocomplete #auto="matAutocomplete">
    <mat-option>Test</mat-option>
    <ng-container *ngTemplateOutlet="default; context:{options: options}"></ng-container>
</mat-autocomplete>

这是一个堆栈闪电战：https://stackblitz.com/edit/angular-bz45ae?file=app/autocomplete-simple-example.html

Answer 1

这与mat-autocomplete 行为有关。它使用@ContentChildren 访问MatOption 的QueryList。 mat-autocomplete 也有一个ngAfterContentInit 钩子，它在其中创建一个ListKeyManger，它管理项目列表中的活动选项，将MatOptions 的QueryList 作为构造函数参数传递。你可以看到它here。

是的，那些mat-option 被渲染了，但它仍然不能正常工作，你可以通过添加optionSelected 监听器来检查它：

<mat-autocomplete #auto="matAutoComplete" (optionSelected)="optionSelected($event)">

假设我们在组件的optionSelected 方法中执行console.log - 当您单击通过ngTemplateOutlet 呈现的任何选项时，它不会被调用。 mat-autocomplete 无法访问此列表，因为此列表是另一个视图的一部分（ng-template 中的所有内容都是单独编译的视图定义）。

您可以创建一个可重用组件，在其中传递options 绑定并通过注入FormGroupDirective 将其与父表单链接。