Html 角度-搜索栏api请求期间显示微调器

一旦用户在搜索栏中插入搜索词，我就无法实现加载微调器的显示。一旦我检测到搜索词属性的更改，就会发出一个API请求，用相应的数据填充视图中的列表，我希望在此过程中显示我的微调器

这是我的.ts：

@Component({
    selector: 'app-orders-list',
    templateUrl: './orders-list.component.html',
    styleUrls: ['./orders-list.component.css'],
})
export class OrdersListComponent implements OnChanges, AfterViewInit{
    
    @Input() ordersWithSlots: Order[] = [];
    @Input() ordersWithNoSlots: Order[] = [];
    @Input() timelinesWithSlots: string[] = [];
    @Input() timelinesWithNoSlots: string[] = [];
    @Input() currentTabIndex: number;
    @Input() searchTerm: string;
    filteredSlotsOrders: Order[] = [];
    filteredNoSlotsOrders: Order[] = []
    filteredSlotsTimelines: string[] = [];
    filteredNoSlotsTimelines: string[] = [];
    showSpinner = false;

    constructor(
        private apiManager: ApiManagerService,
        private ordersService: OrdersManagerService
    ) {}

    ngOnChanges(changes: SimpleChanges): void {
        // searchTerm comes from parent component, if it changes then a new search is active
        if (changes.searchTerm) {
            if(changes.searchTerm.currentValue !== changes.searchTerm.previousValue){
                if(changes.searchTerm.currentValue === "") {
                    this.filteredSlotsOrders = [...this.ordersWithSlots];
                    this.filteredNoSlotsOrders = [...this.ordersWithNoSlots];
                    this.filteredSlotsTimelines = [...this.timelinesWithSlots];
                    this.filteredNoSlotsTimelines = [...this.timelinesWithNoSlots];
                }
                else{
                    this.getOrdersBySearchTerm(); // want to show a spinner while this task is running
                }
            }
        }
    ...
    }

    getOrdersBySearchTerm(){
        if(this.currentTabIndex === 0){
            this.apiManager.fetchOrdersBySearchTerm("status=PENDING&status=FULFILLED&only_slots=true", this.searchTerm).subscribe(orders => {
                const loadedOrders = orders;
                this.filteredSlotsOrders = loadedOrders.results;
        });
            this.apiManager.fetchOrdersBySearchTerm("status=PENDING&status=FULFILLED", this.searchTerm).subscribe(orders => {
                const loadedOrders = orders;
                this.filteredNoSlotsOrders = this.ordersService.filterOrders(loadedOrders.results, OrderStatus.PENDING, false);
                this.filteredNoSlotsOrders = [...this.filteredNoSlotsOrders, ...this.ordersService.filterOrders(loadedOrders.results, OrderStatus.PROCESSED, false)]
        });
    ...
    }

这是我的.html：

<app-loading-spinner [hidden]="showSpinner !== true"></app-loading-spinner>
<div [hidden]="showSpinner === true">
    <!-- the actual view and data is here -->
</div>

由于视图存在并且在之前有数据，我们可以在搜索栏上进行搜索，因此我无法执行类似的操作，例如在

ngOnInit

中启动微调器设置为true，然后在调用

后将其设置为false。getOrdersBySearchTerm（）

在这种特殊的搜索情况下，我可以做什么来只显示微调器

提前谢谢。

怎么样：

getOrdersBySearchTerm（）{
this.showSpinner=true；
if（this.currentTabIndex==0）{
this.apimager.fetchOrdersBySearchTerm（“status=PENDING&status=completed&only\u slots=true”，this.searchTerm）。订阅（订单=>{
常量loadedOrders=订单；
this.filteredSlotsOrders=loadedOrders.results；
this.showSpinner=false；
});
this.apimager.fetchOrdersBySearchTerm（“status=PENDING&status=completed”，this.searchTerm）.subscribe（订单=>{
this.showSpinner=false；
常量loadedOrders=订单；
this.filteredNoSlotsOrders=this.ordersService.filteroorders（loadeorders.results，OrderStatus.PENDING，false）；
this.filteredNoSlotsOrders=[…this.filteredNoSlotsOrders，…this.ordersService.filteroorders（loadeorders.results，OrderStatus.PROCESSED，false）]
});
...
}

什么不适用于您拥有的？@BlackICE我以前使用过微调器，但我在加载整个组件上下文时使用了它（将微调器启动为true，当组件加载且数据准备就绪时将其设置为false），这已经起作用了。但是，对于这一个，我不想将微调器设置为true，只想在搜索处于活动状态时开始进行API调用时显示它。我尝试了使用

setTimeout（）

on

ngochanges

执行了几项操作，但行为从来都不是所需的。获取数据后，会执行一次轻击操作：（@eko不工作：/I我可以看到正在使用新数据构建视图，但在这种情况下微调器从不显示。即使尝试在1.5s的点击中使用

setTimeout

，微调器仍然没有显示。哈哈，你是对的。然后可能将其移到方法的开头会解决它。我更新了我的答案，感谢@EliseoHa您是否尝试过使用

trackBy

以获得更好的性能？