如何在AngularJS组件中展示多个Oracle SQL查询结果？

嘿，这个需求其实很好实现，AngularJS提供了专门的工具来处理多个异步请求，我给你两种常用方案，按需选择就行～

首先先提个小细节：你原来的代码里有个隐形坑——then回调函数里的this已经不是控制器的上下文了，所以先把控制器的this存成一个变量（比如vm，也就是view model的缩写），避免后续赋值时找不到正确的对象。

方案1：并行发起多个请求（推荐） #

如果你的多个SQL查询之间没有依赖关系（不需要等第一个结果出来再请求第二个），用$q.all()可以让所有请求同时发起，等全部完成后再统一处理结果，效率更高。

修改后的控制器代码如下：

'use strict';

angular.module('cryostat', []).component('cryostat', {
  templateUrl: 'cryostat/cryostat.template.html',
  controller: function cryostatController($http, $q) {
    // 保存控制器上下文，避免回调中this指向混乱
    var vm = this;
    vm.pageTitle = "NP04 Cryostat";
    vm.natalie = 1;

    // 定义多个HTTP请求（对应不同的SQL查询接口）
    var request1 = $http.get("cryostat.conn.php");
    var request2 = $http.get("cryostat.conn2.php"); // 假设这是第二个查询的接口
    // 可以继续添加更多请求，比如request3、request4...

    // 并行执行所有请求
    $q.all([request1, request2])
      .then(function(results) {
        // results是一个数组，顺序和上面请求的顺序完全对应
        vm.TT0101 = results[0].data.records;
        vm.TT0102 = results[1].data.records; // 把第二个请求的结果赋值给控制器属性
      })
      .catch(function(error) {
        // 处理请求失败的情况，比如打印错误信息方便排查
        console.error('请求出错:', error);
      });
  }
});

方案2：串行发起请求（适用于有依赖的场景） #

如果某个查询需要依赖前一个查询的结果（比如用第一个请求返回的参数作为第二个请求的查询条件），可以在第一个请求的then回调里发起第二个请求：

'use strict';

angular.module('cryostat', []).component('cryostat', {
  templateUrl: 'cryostat/cryostat.template.html',
  controller: function cryostatController($http) {
    var vm = this;
    vm.pageTitle = "NP04 Cryostat";
    vm.natalie = 1;

    // 先发起第一个请求
    $http.get("cryostat.conn.php")
      .then(function(response) {
        vm.TT0101 = response.data.records;
        // 第一个请求成功后，用它的结果作为参数发起第二个请求
        return $http.get("cryostat.conn2.php?id=" + vm.TT0101[0].id);
      })
      .then(function(response) {
        vm.TT0102 = response.data.records;
      })
      .catch(function(error) {
        console.error('请求出错:', error);
      });
  }
});

模板中展示结果 #

不管用哪种方案，只要把结果赋值给控制器的属性（比如vm.TT0101、vm.TT0102），就可以在模板里用AngularJS的指令轻松展示了，比如：

<h1>{{ $ctrl.pageTitle }}</h1>

<!-- 展示第一个SQL查询的结果 -->
<div class="query-result">
  <h3>TT0101 数据</h3>
  <ul>
    <li ng-repeat="item in $ctrl.TT0101">{{ item.yourFieldName }}</li>
  </ul>
</div>

<!-- 展示第二个SQL查询的结果 -->
<div class="query-result">
  <h3>TT0102 数据</h3>
  <ul>
    <li ng-repeat="item in $ctrl.TT0102">{{ item.yourFieldName }}</li>
  </ul>
</div>

注意：要确保你的后端接口（比如cryostat.conn.php）能正确返回包含records字段的JSON数据哦～

内容的提问来源于stack exchange，提问作者George Salukvadze