向材料自动完成添加加载指示器

我正在处理Angular5的材质组件,并且有一个表单控件,它是由服务调用驱动的自动完成功能不幸的是,在服务调用完成之前,不会显示自动完成功能,而且由于我们目前遇到的一些网络延迟问题,大多数用户在服务调用完成之前都已完成键入。我想显示某种视觉指示器,表示自动完成正在加载,但无法确定如何加载。

我们尝试的廉价解决方案是用工作“加载”填充自动完成菜单,但是这需要调整我们的过滤,以便当有人开始键入一个不是以l开头的值时,它不会立即被压扁。

以下是其中一个字段的HTML基础:

<mat-form-field [hideRequiredMarker]="true">
    <input matInput [(ngModel)]="size" type="text" 
             placeholder="{{'OPTIONS.SIZE' | translate}}"
             [matAutocomplete]="autoSize"
             readonly="{{!model}}"
             (keyup)="filterSizes()"
             matTooltip="{{ 'OPTIONS.MODEL_REQUIRED' | translate }}" 
             [matTooltipDisabled]="model != ''" />

    <mat-autocomplete #autoSize="matAutocomplete">
       <mat-option *ngFor="let completeSize of filteredSizeNames" [value]="completeSize">
          {{completeSize}}
       </mat-option>
    </mat-autocomplete>
</mat-form-field>

服务调用在完成时填充filteredsizenames变量。我看了看 the material component pages 没有多少运气就想出了解决办法。