Angular调用服务后NG Bootstrap表格不显示数据问题求助

问题根因 #

你代码的核心问题是异步接口请求和同步逻辑执行顺序错误：
_search方法中调用this.service.get发起API请求是异步操作，你没有等待接口返回就直接执行了后续的排序、分页逻辑，此时allMemberLists还是初始的空数组，所以最终返回给订阅者的始终是空数组；而服务中打印的是接口异步回调后赋值的allMemberLists，所以能看到正常数据。

修复方案 #

修改UserRegistrationService中的_search方法，不要在方法内部订阅API请求，直接通过RxJS操作符链式处理异步流，代码修改如下：

private _search(): Observable<SearchResultUserRegistrationInfo> {
    const { sortColumn, sortDirection, pageSize, page } = this._state;

    // 直接返回API请求的Observable，通过pipe处理后续逻辑
    return this.service.get<AccountListResultInfo>(`${this.apiPATH}lists`).pipe(
        map(data => {
            let allMemberLists: UserRegistrationInfo[] = [];
            if (data) {
                allMemberLists = data.Accounts;
                console.log("========== 来自服务层 ==============");
                console.log(allMemberLists);
            }
            // 1. 排序
            let userLists = sort(allMemberLists, sortColumn, sortDirection);
            const total = userLists.length;
            // 2. 分页
            userLists = userLists.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
            return { userLists, total };
        })
    );
}

验证说明 #

修改后接口请求的返回会先经过map处理排序、分页逻辑，再传递给外层的switchMap，最终_userInfoLists$会拿到正确的处理后的数据，组件订阅后即可正常渲染表格。

内容的提问来源于stack exchange，提问作者mnu-nasir