如何在使用角材料的搜索输入中显示进度?

Question

我创建了一个应用程序，其中包含用于搜索目的的材料输入。我想输入字段的水平线有进度指标，当搜索正在进行中。我的想法是用*ngIf显示和隐藏progressBar，并用css移动它以匹配输入的水平线高度。下面是代码:

<mat-form-field>
<mat-label>Search</mat-label>
<input matInput (input)="onSearchChange($event.target.value)">
<mat-progress-bar *ngIf="searchDone" style="top:9px" [color]='color' mode="query"></mat-progress-bar>
</mat-form-field>

我认为这不是最好的解决方案，因为我看到进度条下面的输入水平线。是否有任何解决方案，使输入水平线显示自己的进度?

Answer 1

作为一个可能的解决方案，你可以开始使用lib NgxMatSelectSearch。

Api有一个输入选项searching，用于在搜索时显示指示器。

查看示例Stackblitz并尝试在"服务器端搜索"中搜索。输入。

Answer 2

您可以使用如下模板将进度条放置在表单字段上:

<div class="container">
<mat-form-field appearance="fill">
<textarea matInput [(ngModel)]="message" [matTextareaAutosize]="true" [matAutosizeMinRows]="1" [placeholder]="placeholder"></textarea>
<button (click)="create()" mat-icon-button matSuffix matTooltip="Send" [disabled]="creating">
<mat-icon>send</mat-icon>
</button>
</mat-form-field>
<mat-progress-bar mode="indeterminate" *ngIf="creating"></mat-progress-bar>
</div>

和这样的CSS:

.container {
position: relative;
}
mat-progress-bar {
position: absolute;
bottom: 16px;
}