1

我正在尝试使用材料自动完成和 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

4

1 回答 1

2

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

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

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

假设我们在组件console.log的方法内部执行了一个optionSelected- 当您单击任何通过ngTemplateOutlet. mat-autocomplete不能仅仅因为这个列表是另一个视图的一部分而访问这个列表（里面的所有东西ng-template都是一个单独编译的视图定义）。

您可以创建一个可重用的组件，您将在其中传递一个options绑定并通过注入FormGroupDirective.

于 2019-07-23T17:33:05.507 回答