时间戳

首页 > 解决方案 > 服务函数未运行单独的函数调用（Angular 7）

angular - 服务函数未运行单独的函数调用（Angular 7）

问题描述

我试图在服务中调用函数时运行单独的函数。

这是一个简单的例子

foo() {
    this.bar();
    console.log('foo');
}

bar() {
    console.log('bar');
}

运行我的代码版本时，我看到 console.log('foo') 工作，但不是 bar

基本上，每次运行特定函数 (A) 时，我都需要触发另一个函数 (B) 来填充稍后将被拉取的数据，但当我需要显示它时需要立即准备好。对于上下文，函数 B 会将数据保存到状态中。

我被要求分享真实的代码。这里是：

    getMenuByHandoffType(locationID: number, handoffType: HandoffType): Observable<Menu> {
        if (isNaN(locationID as any)) { // URL contains a slug
            return this.cmsService.getSingleLocationBySlug(locationID.toString()).pipe(switchMap(locationInfo => {
                return this.getMenuByHandoffType(Number(locationInfo.menu_id), handoffType);
            }));
        } else {
            console.log('Getting Menu');
            return this.apiService.getCategories(locationID).pipe(switchMap(pages => {
                this.populateLeadThroughs(locationID).pipe(map(res => {
                    this.leadthroughs = res;
                    return
                }));
                const menu = this.mapping.categoriesToMenu(locationID, pages);
                return this.contentService.getMenuWithImages(deMenu);
            }));
        }
    }


    populateLeadThroughs(siteID: number) {
        const leads: any[] = [];
        const order: Order = JSON.parse(sessionStorage.getItem('Order'));
         return this.apiService.getLeadThroughs(siteID).pipe(map(leadthroughRes => {
            leadthroughRes.forEach((leadThrough, index) => {
                this.apiService.getLeadThroughItemsByGroupAndPickupTime(siteID, leadThrough.Id, order.orderReadyTimestamp).pipe(map(groupRes => {
                    leadThrough.Items = groupRes;
                    leads[leadThrough['Id']] = leadThrough;
                    console.log(leads);
                }));
            });
            return leads;
        }));
    }

我还测试了：

this.leadthroughs = this.populateLeadthroughs(locationID);

我没有运气

标签： angular

解决方案

这里的问题是您使用该代码创建了一个 observable

this.populateLeadThroughs(locationID).pipe(map(res => {
                this.leadthroughs = res;
                return;
            }));

而且您从不订阅它，因此它永远不会运行。我将您的代码更改为：

getMenuByHandoffType(locationID: number, handoffType: HandoffType): Observable<Menu> {
    if (isNaN(locationID as any)) { // URL contains a slug
        return this.cmsService.getSingleLocationBySlug(locationID.toString()).pipe(switchMap(locationInfo => {
            return this.getMenuByHandoffType(Number(locationInfo.menu_id), handoffType);
        }));
    } else {
        console.log('Getting Menu');
        return this.apiService.getCategories(locationID).pipe(
            switchMap(pages => {
                this.populateLeadThroughs(locationID).subscribe(res => 
                    {
                        this.leadthroughs = res;
                    });
                const menu = this.mapping.categoriesToMenu(locationID, pages);
                return this.contentService.getMenuWithImages(deMenu);
        }));
    }
}


populateLeadThroughs(siteID: number) {
    const leads: any[] = [];
    const order: Order = JSON.parse(sessionStorage.getItem('Order'));
     return this.apiService.getLeadThroughs(siteID).pipe(map(leadthroughRes => {
        leadthroughRes.forEach((leadThrough, index) => {
            this.apiService.getLeadThroughItemsByGroupAndPickupTime(siteID, leadThrough.Id, order.orderReadyTimestamp).pipe(map(groupRes => {
                leadThrough.Items = groupRes;
                leads[leadThrough['Id']] = leadThrough;
                console.log(leads);
            }));
        });
        return leads;
    }));
}

但请注意，如果您的 observable 没有自动取消订阅（自动取消订阅通常只发生在 Http 调用中），您必须自己取消订阅。

推荐阅读