Angular 角度11与NgRx，材料自动完成异步选项赢得'；不显示

我想显示自动完成的选项。这些选项通过ngrx/effects从后端检索。数据提取工作正常，行为证明。 我发现有一个线程写到，选项呈现的时间比检索的时间早，所以我尝试手动打开选项面板，参考，因为它是在文档中定义的，但当我尝试引用下面代码中的触发器时，我得到了错误NG8003：在exportAs'matAutocompleteTrigger'中找不到指令

新建模式表单.component.html

<mat-card>
...
      <mat-form-field class='col-12 col-lg-4'>
        <mat-label>{{'schema.new.period.label'|translate}}</mat-label>
        <input #periodTrigger='matAutocompleteTrigger' [autocomplete]='periodAuto' formControlName='period' matInput required type='text'>
        <mat-autocomplete #periodAuto='matAutocomplete' [displayWith]='displayObjectFn'>
          <mat-option *ngFor='let option of filteredPeriods' [value]='option'>
            {{option.name}}
          </mat-option>
        </mat-autocomplete>
        <mat-error *ngIf="controls.period.touched && controls.period.hasError('required')"
                   class='errors'>
          {{'form.required'|translate}}
        </mat-error>
      </mat-form-field>
...
</mat-card>
<div class='col-12'>
  <h2>parents</h2>
  <span *ngFor='let option of filteredParents'>{{option.name}}</span>
</div>

<div class='col-12'>
  <h2>periods</h2>
  <span *ngFor='let option of filteredPeriods'>{{option.name}}</span>
</div>

架构视图页面.component.ts

export class NewSchemaFormComponent implements OnInit, OnDestroy {
  ...
  @ViewChild('periodTrigger', { static: true })
  periodAutoComplete: MatAutocompleteTrigger;
  @ViewChild('parentTrigger', { static: true })
  parentAutoComplete: MatAutocompleteTrigger;
  @Input()
  set filteredPeriods(periods: Period[]) {
    this.fPeriods = periods;
    this.periodAutoComplete.openPanel();
  }
  @Input()
  set filteredParents(versions: Version[]) {
    this.fParents = versions;
    this.parentAutoComplete.openPanel();
  }
  ...
}

@Component({
  template: `
    <div class='d-flex flex-row flex-wrap'>
     ...

      <app-new-schema-form
        class='col-12 col-lg-6'
        [formGroup]='newVersionGroup'
        [filteredParents]='filteredParents$|async'
        [filteredPeriods]='filteredPeriods$|async'
        (filterParents)='searchParents($event)'
        (filterPeriods)='searchPeriods($event)'
        (onSubmit)='submitNewSchema($event)'
      ></app-new-schema-form>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SchemaViewPageComponent implements OnInit {
  
  ...
  newVersionGroup: FormGroup;
  filteredPeriods$: Observable<Period[]>;
  filteredParents$: Observable<Version[]>;

  constructor(private store: Store, private fb: FormBuilder) {
    store.dispatch(
      SchemaApiActions.searchSchemas({
        query: {
          limit: this.pagination[0],
          offset: 0
        } as PaginatorFilter
      })
    );
    store.dispatch(
      PeriodApiActions.searchPeriods({
        query: {
          limit: this.pagination[0],
          offset: 0
        } as PaginatorFilter
      })
    );
   ...
    this.filteredParents$ = combineLatest([
      store.select(newSchemaSelector.selectFilteredParents),
      store.select(newSchemaSelector.selectFilteredParentSearch)
    ]).pipe(
      map(data => data[0].filter(p => JSON.stringify(p).toLowerCase().includes(data[1].toLowerCase())))
    );

    this.newVersionGroup = this.fb.group({
      name: ['', Validators.required],
      period: ['', Validators.required],
      parent: ['']
    });

    ...
    this.filteredPeriods$ = combineLatest([
      store.select(newSchemaSelector.selectFilteredPeriods),
      store.select(newSchemaSelector.selectFilteredPeriodSearch)
    ]).pipe(
      tap(x => console.log('filteredPeriods$', x)),
      map(data => data[0].filter(p => JSON.stringify(p).toLowerCase().includes(data[1].toLowerCase()))),
      tap(x => console.log('filteredPeriods$ mapped', x))
    );
  }

  ngOnInit(): void {
    this.store.dispatch(
      SchemaApiActions.searchSchemas({
        query: {
          limit: this.pagination[0],
          offset: 0
        } as PaginatorFilter
      })
    );
    this.store.dispatch(
      PeriodApiActions.searchPeriods({
        query: {
          limit: this.pagination[0],
          offset: 0
        } as PaginatorFilter
      })
    );
  }

  ...

  searchParents(search: string) {
    this.store.dispatch(FilterParentActions.loadFilterParents({ search }));
  }

  searchPeriods(search: string) {
    this.store.dispatch(FilterPeriodActions.loadFilterPeriods({ search }));
  }

 ...
}

export const MATERIAL_MODULES = [
  MatCheckboxModule,
  MatTreeModule,
  MatButtonModule,
  MatFormFieldModule,
  MatIconModule,
  MatTableModule,
  MatDatepickerModule,
  MatInputModule,
  MatPaginatorModule,
  MatProgressSpinnerModule,
  MatTooltipModule,
  MatCardModule,
  MatAutocompleteModule,
  MatSortModule
];

@NgModule({
    declarations: [
        SchemaTableComponent,
        SchemaTreeComponent,
        SchemaViewPageComponent,
        NewSchemaFormComponent,
        PeriodTableComponent,
    ],
    imports: [
        CommonModule,
        SharedModule,
        TranslateModule.forChild(),
        SchemaRoutingModule,
        ...MATERIAL_MODULES,
        ReactiveFormsModule,
        StoreModule.forFeature(fromSchema.schemaFeatureKey, fromSchema.reducers),
        EffectsModule.forFeature([
            SchemaEffects,
            PeriodEffects,
            DepartmentEffects,
            NewSchemaEffects,
            FilterPeriodsEffects,
            FilterParentsEffects,
        ]),
    ],
})
export class SchemaModule {}

GitLab回购：