Question

一旦用户在搜索栏中插入搜索词，我就无法实现加载微调器的显示。一旦我检测到我的搜索词属性发生变化，就会执行一个 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 然后设置调用 this.getOrdersBySearchTerm() 后它为 false。

我该怎么做才能在这种特定的搜索情况下只显示微调器？

提前致谢。

Answer 1

怎么样：

    getOrdersBySearchTerm(){
        this.showSpinner = true;
        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.showSpinner = false;
        });
            this.apiManager.fetchOrdersBySearchTerm("status=PENDING&status=FULFILLED", this.searchTerm).subscribe(orders => {
                this.showSpinner = false;
                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)]
        });
    ...
    }

<ng-template #loading>
 <app-loading-spinner></app-loading-spinner>
</ng-template>

<div *ngIf="!showSpinner; else loading">
    <!-- the actual view and data is here -->
</div>

Angular - 在搜索栏 api 请求期间显示微调器

1 个答案: