Question

我正在尝试使用物料自动完成和ngTemplateOutlet创建一组自定义模板，以切换要在其中显示结果的模板（例如，如果将结果分组，则它们的显示方式将与传统的自动完成选项不同）。

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

我已经尝试过我能想到的ng-container和template的所有变体。

例如，使用模板

<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>

这是一个令人眼花stack乱的事情：https://stackblitz.com/edit/angular-bz45ae?file=app/autocomplete-simple-example.html

Answer 1

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

是的，那些mat-option已渲染，但仍无法正常工作，您可以通过添加optionSelected侦听器进行检查：

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

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

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

Angular材质内的ngTemplateOutlet自动填充功能仅使用默认选项进行渲染

1 个答案: