Angular Material Autocomplete 设置滚动顶部答案

【问题标题】：Angular Material Autocomplete set scrolltopAngular Material Autocomplete 设置滚动顶部
【发布时间】：2018-10-16 19:47:20
【问题描述】：

打开<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-sn-p:

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

我使用两个不同输入的原因是我使用另一个自定义指令来格式化输入。

【问题讨论】：

标签： angular autocomplete angular-material mat-autocomplete

【解决方案1】：

这似乎是一个时间问题，所以我实施了一个修补程序以将 _setScrollTop 推迟到下一个周期：

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

【讨论】：