Angular mat autocomplete能否使用另一个组件中包含的mat选项组件？ 基本问题

mat自动完成组件（与matInput一起使用时）通过如下方式显示mat选项组件：

<!-- This works -->
<mat-autocomplete>
  <mat-option>Option 1</mat-option>
  <mat-option>Option 2</mat-option>
  ...
</mat-autocomplete>

single field.component.html（包含我正在使用mat选项组件的输入或选择元素的组件。我删除了一些代码以使其更具可读性，并指出了我正在使用single field options组件的位置）

/**/
{{field.label}
<!-- This doesn't work -->
<mat-autocomplete>
  <middle-man/>
<mat-autocomplete>

(middle-man.html)
<mat-option>Option 1</mat-option>
<mat-option>Option 2</mat-option>
...

<!--With grouping of options-->
<ng-container *ngIf="determineIfGrouped()">
  <mat-optgroup *ngFor="let kv of field.options | keyvalue" [label]="kv.key">
    <mat-option [value]="option" *ngFor="let option of kv.value">{{option}}</mat-option>
  </mat-optgroup>
</ng-container>

<!--Without grouping of options-->
<ng-container *ngIf="!determineIfGrouped()">
  <mat-option [value]="option" *ngFor="let option of field.options">{{option}}</mat-option>
</ng-container>

export class SingleFieldOptionsComponent {
  @Input() field;
  constructor() { }
  determineIfGrouped(): boolean {
    return !Array.isArray(this.field?.options);
  }
}

/*...*/
  <mat-form-field *ngIf="field.type !== 'checkbox'">
    <mat-label>{{field.label}}</mat-label>
    <input *ngIf="field.type === 'text' matInput [matAutocomplete]="auto"/>
    <mat-autocomplete #auto="matAutocomplete">
      <ng-container *ngIf="field.type !== 'select'" >
        // ----------------- THE IMPORTANT PART ----------------------
        <app-single-field-options [field]="field"></app-single-field-options>
        // ----------------- THE IMPORTANT PART ----------------------
      </ng-container>
    </mat-autocomplete>
    <mat-select *ngIf="field.type === 'select'" [formControlName]="field.controlName">
      // (I also use it here)
      <app-single-field-options [field]="field"></app-single-field-options>
    </mat-select>
  </mat-form-field>