AngularJS选择项后调用panelInvestigationService无法获取预期数据

开发AngularJS应用时，通过testPanelService选择列表项能正常打印选中项详情，但调用panelInvestigationService获取关联调查详情时，无法得到预期数据。选中项控制台输出正常，但调用服务后无预期响应，数据更新未按预期执行。

相关代码片段 #

服务文件（TypeScript） #

export interface IPanelInvestigation extends IAggregateRoot<string> {
    investigationId: string;
    testName: string;
    sampleName: string;
    testPanelId: string;
    testPanelName: string;
    testParameters: ITestParameter[];
    retired: boolean;
}

export interface ITestParameter extends IAggregateRoot<string> {
    testParameterId: string;
    name: string;
}

export interface IPanelInvestigationService
    extends IAggregateRootService<IPanelInvestigation, string> {
    query(
        text?: string,
        page?: IPageRequest
    ): ng.IPromise<IPageReponse<IPanelInvestigation>>;
}

interface IPanelInvestigationResource
    extends IResourceService<IPanelInvestigation> {
    fetch: ng.resource.IResourceMethod<IPageReponse<IPanelInvestigation>>;
}

export class PanelInvestigationService
    extends EntityService<IPanelInvestigation, string, IPanelInvestigationResource>
    implements IPanelInvestigationService {
    static $inject = ['PanelInvestigationResource'];
    constructor(private resource: IPanelInvestigationResource) {
        super(resource);
    }

    query = (
        text?: string,
        page?: IPageRequest
    ): ng.IPromise<IPageReponse<IPanelInvestigation>> => {
        if (angular.isUndefined(page)) {
            page = {
                page: 0,
                size: 32000,
            };
        }
        return this.getResource().fetch({
            text: text,
            page: page.page,
            size: page.size,
            sort: page.sort,
        }).$promise;
    };
}

export class PanelInvestigationResourceService {
    private apiRoot: string = Settings.serverResource('api/get-individual-investigations-by-set/:investigationSetId/');
    constructor(private $http) {}

    query = (id: string) => this.$http.get(`${this.apiRoot}${id}`);

    fetch = (id: string) => this.$http.get(`${this.apiRoot}${id}`);

    get = (id: string) =>
        this.$http.get(`${this.apiRoot}${id}`).success(function (data) {
            if (data) {
                data = angular.fromJson(data);
            }
            return data;
        });

    update = (id: string) => this.$http.put(`${this.apiRoot}${id}`);
}

PanelInvestigationResource.$inject = ['$resource'];

export function PanelInvestigationResource(
    $resource: ng.resource.IResourceService
): IPanelInvestigationResource {
    const resourceUrl = Settings.serverResource(
        'api/get-all-test-panels/:investigationSetId/'
    );

    return <IPanelInvestigationResource>$resource(
        resourceUrl,
        {},
        {
            query: { method: 'GET', isArray: false },
            fetch: { method: 'GET', isArray: false },
            get: {
                method: 'GET',
                transformResponse: function (data) {
                    if (data) {
                        data = angular.fromJson(data);
                    }
                    return data;
                },
            },
            update: { method: 'PUT' },
        }
    );
}

控制器代码（TypeScript） #

$onInit = () => {
    this.loadTestPanels();
};

loadTestPanels = () => {
    this.testPanelService.query().then((response) => {
        console.log('TestPanelService response:', response.content);
        this.dataSet = response.content;
    });
};

loadPanelInvestigations = (testPanelId) => {
    this.panelInvestigationService.query(testPanelId).then((response) => {
        this.dataSet = response.content.map(investigation => ({
            code: investigation.investigationId,
            name: investigation.testName
        }));
    });
    console.log('Updated dataSet with panel investigations:', this.dataSet);
};

onSelected = (item) => {
    console.log('Selected item:', item);
    this.loadPanelInvestigations(item.code);
    this.rootScope.$broadcast('MrsPatientInvestigationSelectSetController', {
        data: item,
    });
};

HTML代码 #

<div class="investigation-select-container">
  <table datatable="ng"  class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>Code</th>
        <th>Name</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="i in vm.dataSet">
        <td>{{ i.code }}</td>
        <td>{{ i.name }}</td>
        <td>
          <button class="btn btn-default"  ng-click="vm.onSelected(i)">
           Choose me
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

已尝试操作 #

• 确认testPanelId已正确传入panelInvestigationService.query()；
• 通过浏览器开发者工具验证网络请求已携带正确的testPanelId；
• 添加控制台日志检查panelInvestigationService.query()的响应结构。

排查思路与解决方案 #

1. 参数传递与后端接口不匹配 #

当前PanelInvestigationService的query方法将testPanelId作为text参数传递，但后端接口需要的是路径参数investigationSetId。修改服务的query方法，将参数绑定到正确的路径变量：

query = (
    investigationSetId?: string,
    page?: IPageRequest
): ng.IPromise<IPageReponse<IPanelInvestigation>> => {
    if (angular.isUndefined(page)) {
        page = {
            page: 0,
            size: 32000,
        };
    }
    return this.getResource().fetch({
        investigationSetId: investigationSetId, // 绑定路径参数
        page: page.page,
        size: page.size,
        sort: page.sort,
    }).$promise;
};

同时，确认PanelInvestigationResource的API路径与后端实际提供数据的接口一致，若要获取单个面板的调查详情，应使用get-individual-investigations-by-set路径：

const resourceUrl = Settings.serverResource(
    'api/get-individual-investigations-by-set/:investigationSetId/'
);

2. 异步日志时机错误 #

loadPanelInvestigations中的日志写在Promise回调外部，此时异步请求尚未完成，dataSet仍为旧值。将日志移到then回调内部：

loadPanelInvestigations = (testPanelId) => {
    this.panelInvestigationService.query(testPanelId).then((response) => {
        this.dataSet = response.content.map(investigation => ({
            code: investigation.investigationId,
            name: investigation.testName
        }));
        console.log('Updated dataSet with panel investigations:', this.dataSet);
    });
};

3. 添加错误捕获 #

在Promise链中添加catch回调，捕获请求失败的异常，排查错误原因：

this.panelInvestigationService.query(testPanelId).then((response) => {
    // 现有数据处理逻辑
}).catch((error) => {
    console.error('获取面板调查详情失败:', error);
});

4. DataTable视图刷新 #

使用datatable="ng"时，更新dataSet后可能需要手动触发视图刷新，可在数据更新后执行：

this.$scope.$apply();
// 或者调用DataTable的重新渲染方法
angular.element('table').DataTable().draw();

内容的提问来源于stack exchange，提问作者Ruth Mazango