如何使用 angular material 显示搜索输入的进度？

Question

我创建了一个应用程序，其中包含 material 用于搜索的输入。当搜索正在进行时，我希望输入字段的水平线有进度指示器。我的想法是使用 *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

作为一种可能的解决方案，您可以开始使用库 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;
}

如何使用 angular material 显示搜索输入的进度？

How to show progress in a search input using angular material?

css

material-design

angular-material

angular