Question

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

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

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

autocomplete.component.html

＆＃13;

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

＆＃13;

Answer 1

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

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

无法在TemplateRef中包含自动完成的mat-option

1 个答案: