如何使用Http为Angular 2中的特定组件正确使用进度微调器？

我有一个基本的角度分量，如下所示。从这个组件中，我生成了一个TestObj类型的对象数组，并使用相同的数组对的所有元素进行同步post调用，条件是如果kth（0 身份证件 {{element.processedFor}} 过程发生了 完成 错误提示 批量成功 完成 错误提示 另外，我想做的是显示一个进度微调器，该微调器在对TestObj类型的对象进行post调用时显示，在从后端获得特定对象的响应时隐藏。该进度微调器必须完全禁用UI屏幕

---

我尝试使用拦截器服务来实现同样的功能。问题是拦截器显示整个前端发出的所有调用的进度微调器，我尝试实现的是执行相同的操作，但仅限于处理组件发出的http调用。我尝试使用局部变量

isLoading

并在

ProcessingComponent

的

构造函数中将其设置为false，在执行
startBatchRun
时，我将
isLoading
设置为true，并在退出
startBatchRun
时将其设置为false。是否有任何方法可以从可观察管道实现功能？
您应该看看Angular Material文档中描述的实现，在数据表示例下，特别是“”示例

相关代码段：

displayedColumns:string[]=['created'，'state'，'number'，'title']；
数据：GithubIssue[]=[]；
isLoadingResults=真；
...
ngAfterViewInit（）{
...
合并（this.sort.sortChange，this.paginator.page）
.烟斗(
startWith（{}），
开关映射（（）=>{
this.isLoadingResults=true；
返回此.exampleDatabase！.getrepoises（this.sort.active、this.sort.direction、this.paginator.pageIndex）；
}),
地图（数据=>{
...
this.isLoadingResults=false；
...
返回数据项；
}),
捕获错误（（）=>{
...
返回观察值（[]）；
})
).subscribe（data=>this.data=data）；
}

这样，您只需要一个局部布尔变量，并根据变量的状态隐藏/显示微调器

如果您希望对请求进行去抖动（因此它不会每次都显示，即使对于持续时间
100ms
）的请求，也可以在
switchMap（）
中添加一个
计时器
，如下所示：

...

switchMap(() => {          
    const result$ = this.exampleDatabase!.getRepoIssues(this.sort.active, this.sort.direction, this.paginator.pageIndex);
    timer(100).pipe(takeUntil(result$)).subscribe(t => this.isLoadingResults = true);
}),

...

这是否回答了您的问题？您需要帮助解决哪一点问题？1.如何有条件地显示加载微调器2.如何设置加载微调器的样式？@KurtHamilton我需要帮助切换局部变量（本例中为isLoading）并使用它来显示进度微调器。我想在post调用进行时将isLoading设置为true，在从后端得到响应时将其设置为false。我试图从可观察对象内部执行此操作。简而言之，我想有条件地显示spinner@chaitanyaguruprasad所以这个过程类似于：1.Start.load=true.2。为数组中的每个项调用一个可观察项。3.当所有可观察项都返回结果时，loading=false？@KurtHamilton是的。你的理解是正确的。这里的关键是http调用是同步进行的。在第一个可观察项返回之前，第二个不会被推送。推送第一个可观察项时，loading=true，当第一个可观察项返回时，loading=trueurns，loading=false。然后，当按下第二个按钮时，loading=true，依此类推
import { Injectable, Inject } from "@angular/core";
import { Http } from "@angular/http";

@Injectable()
export class ProcessingService {

    constructor(@Inject('portfolioBaseUrl') private portfolioBaseUrl: string, 
    private http: Http) {}

    processingUrl = this.portfolioBaseUrl + '/process/'

    public runBatchExperiment(processingObj:TestObj ) {
        return this.http.post(`${this.processingUrl}`,processingObj);
    }

}

<button *ngIf = "arrayToProcess.length > 0" mat-raised-button  (click) = "startBatchRun()" >Start Processing</button>   

<div *ngIf = "arrayToProcess.length > 0" >
    <mat-table [dataSource] = "arrayToProcess" >

        <ng-container matColumnDef="processedFor">
            <mat-header-cell *matHeaderCellDef> ID</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.processedFor }} </mat-cell> <!--add pipe here-->
        </ng-container>


        <ng-container matColumnDef="isProcessingHappened">
            <mat-header-cell *matHeaderCellDef> Proceesing happened </mat-header-cell>
            <mat-cell *matCellDef="let element">  
                <mat-icon *ngIf = "element.isProcessingHappened === true" >done</mat-icon>
                <mat-icon *ngIf = "element.isProcessingHappened === false" >error_outline</mat-icon>
            </mat-cell>
        </ng-container>


        <ng-container matColumnDef="isProcessingSuccess">
            <mat-header-cell *matHeaderCellDef> Batch success </mat-header-cell>
            <mat-cell *matCellDef="let element"> 
                <mat-icon *ngIf = "element.isProcessingSuccess === true" >done</mat-icon>
                <mat-icon *ngIf = "element.isProcessingSuccess === false" >error_outline</mat-icon>
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
</div>

...

switchMap(() => {          
    const result$ = this.exampleDatabase!.getRepoIssues(this.sort.active, this.sort.direction, this.paginator.pageIndex);
    timer(100).pipe(takeUntil(result$)).subscribe(t => this.isLoadingResults = true);
}),

...