使用$ctrl而非$scope时，AngularJS中SQL查询结果无法显示的问题

嘿，我帮你揪出问题所在了，核心是控制器上下文绑定错误加上变量赋值对象搞错了，咱们一步步拆解：

问题1：错误地给构造函数而非实例赋值 #

你在$q.all的回调里用了cryostatController.TT0101，这里的cryostatController是你的控制器构造函数，你给它添加的是静态属性，而模板里的{{ $ctrl.TT0101Value }}对应的是当前控制器实例的属性，所以模板根本访问不到这个值，自然显示为空；用this.TT0101时因为回调里this指向不对，所以抛出undefined。

问题2：Promise回调中的this指向丢失 #

在$http或者$q.all的回调函数里，this的上下文已经不再是控制器实例了，直接用this赋值会导致变量绑定到错误的对象上。

问题3：重复的HTTP请求（非致命但冗余） #

你发起了两次完全相同的$http.get("cryostat/cryostat.conn.php")请求，完全没必要，一次请求就能拿到数据。

修正后的组件代码 #

'use strict';
angular.module('cryostat', []).component('cryostat', {
  templateUrl: 'cryostat/cryostat.template.html',
  controller: function cryostatController($scope, $http, $q) {
    // 提前保存控制器实例的引用，避免回调中this指向丢失
    var vm = this;
    vm.pageTitle = "NP04 Cryostat";
    vm.natalie = 1;

    // 只发起一次HTTP请求
    var tempRequest = $http.get("cryostat/cryostat.conn.php");
    
    $q.all([tempRequest]).then(function (resultArray) {
      // 用vm（控制器实例）来赋值，而不是构造函数
      vm.TT0101 = resultArray[0].data.records;
      vm.TT0101Value = vm.TT0101[0].Mnish;
      console.log(vm.TT0101Value);
      console.log(vm.TT0101[0].Mnish);
    });

    // 如果需要单独的请求，同样用vm绑定
    $http.get("cryostat/cryostat.conn.php")
      .then(function (response) {
        vm.resss = response.data.records;
      });
  }
});

模板调整（优化显示） #

确保模板里的绑定逻辑正确，把值放到对应的位置：

<table id="penetration">
  <tr>
    <th>Penetration Pipe 33.1</th>
    <th>Penetration Pipe 33.2</th>
  </tr>
  <tr>
    <td>
      TT0101: <span class="value">{{ $ctrl.TT0101Value }}</span><br/>
      TT0102: <br/>
      TT0103: 
    </td>
    <td>TT0107: </td>
  </tr>
</table>

这样调整后，你的SQL查询结果就能正确绑定到模板上显示了。

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