Question

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

我们尝试的廉价解决方案是在工作表“ 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

使用绑定到“加载”变量的不确定进度指示器，该变量在服务调用开始时“打开”，在服务返回时关闭。一种方法是在表单字段中放置一个进度圆作为前缀或后缀。您还可以使用样式设置为直接将其放置在表单域下划线上方的进度条（要使位置正确，这是很多工作，但是可以做到，而且看起来也很漂亮）。

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

在物料自动完成中添加加载指示器

1 个答案: