将加载指示器添加到 Material 自动完成

Question

我正在为 Angular 5 使用 Material 组件，并且有一个由服务调用提供支持的自动完成表单控件。不幸的是，在服务调用完成之前，自动完成不会显示，并且由于我们目前遇到的一些网络延迟问题，大多数用户在服务调用完成之前就完成了输入。我想展示自动完成正在加载的某种视觉指示器，但不知道该怎么做。

我们尝试过的廉价解决方案是用作品 "Loading" 填充自动完成菜单，但是这需要调整我们的过滤，以便当有人开始输入一个没有输入的值时它不会立即被压扁从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，运气不佳，找到了解决方案。

Answer 1

使用绑定到 "loading" 变量的不确定进度指示器，该变量在服务调用启动时获取 "turned on" 并在服务 returns 时关闭。一种方法是在表单字段中放置一个进度圈作为前缀或后缀。您还可以使用样式化的进度条将其直接定位在表单字段的下划线上方（要使位置恰到好处需要大量工作，但它可以完成并且看起来很漂亮）。

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

将加载指示器添加到 Material 自动完成

Adding a loading indicator to Material Autocomplete

angular5

angular-material-5