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

Question

我正在使用 Angular 5 的材料组件，并且有一个表单控件，它是由服务调用提供支持的自动完成功能。不幸的是，在服务调用完成之前，自动完成不会显示，并且由于我们目前遇到的一些网络延迟问题，大多数用户在服务调用完成之前完成了输入。我想显示某种自动完成正在加载的视觉指示器，但无法弄清楚如何去做。

我们尝试的廉价解决方案是使用工作“加载”填充自动完成菜单，但这需要调整我们的过滤，以便在有人开始输入不以 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 变量。我浏览了材料组件页面，但运气不佳，找到了解决方案。

Answer 1

使用绑定到“加载”变量的不确定进度指示器，该变量在服务调用开始时“打开”并在服务返回时关闭。一种方法是在表单字段中放置一个进度圈作为前缀或后缀。您还可以使用样式化的进度条将其直接放置在表单字段的下划线上方（这是使位置恰到好处的大量工作，但它可以完成并且看起来非常光滑）。

一个更简单的解决方案是只使用以相同方式更新的表单字段标签文本。