Угловой набор материалов для автозаполнения

Question

При открытии панели <mat-Autocomplete> я хочу установить для scrollTop значение, которое уже инициализировано в модели.Поэтому я использую метод _setScrollTop.Проблема в том, что приведенный ниже код не работает при первом открытии панели с параметрами, но только после того, как я снова нажму на поле ввода.

.ts выглядит так:

 export class EventInfoComponent implements OnInit {

  @Input('eventInfo') public eventInfo: SimpleEventInfoModel;
  @ViewChild(MatAutocompleteTrigger) toTimeHidden: MatAutocompleteTrigger;
  @ViewChild('toTimeComplete') toTimeAutocomplete: MatAutocomplete;

  public openAutocomplete(e): void {
    e.stopPropagation();
    this.toTimeHidden.openPanel();
    this.toTimeAutocomplete._setScrollTop(2016);
    console.log(this.toTimeAutocomplete._getScrollTop());
  }
}

А это HTML-фрагмент:

<mat-form-field appearance="outline">
    <mat-label>End Time</mat-label>
    <input matInput [required]="true" [(ngModel)]="eventInfo.toTime" 
       name="toTime" (click)="openAutocomplete($event)">
    <input type="hidden" [matAutocomplete]="toTimeComplete 
       [(ngModel)]="eventInfo.toTime" #toTimeHidden name="toTimeHidden"> 
    <mat-autocomplete #toTimeComplete="matAutocomplete">
       <mat-option *ngFor="let time of times" [value]="time"> {{time}} 
       </mat-option>
    </mat-autocomplete>
    <mat-icon matSuffix style="margin: 0 8px 0 8px">access_time</mat-icon>
</mat-form-field>

Причина, по которой я использую два разных ввода, заключается в том, что я использую другую пользовательскую директиву для форматирования ввода.

Answer 1

Похоже, что это проблема синхронизации, поэтому я внедрил исправление, чтобы отложить _setScrollTop до следующего цикла:

setTimeout(() => { this.toTimeAutocomplete._setScrollTop(2016); }, 0);