为什么我不能显示通过$ http.get获取的数据？

Question

我尝试在api中获取数据，并在console.log中获取对象，如下所示：

Object {_id: "590c14b1bf38e524e4b1a1ca", name: "John", age: 22, __v: 0}

这是我用来获取和显示的代码。

服务器

detailRoute.route('/detail/:name')
           .get(function(req,res) {
                User.findOne({name:req.params.name},function(err,user) {
                    console.log(user);
                    if (err){
                        res.status(404).send(err);
                    }else{
                        res.status(200).json(user);
                    }
                })
           });

js：

var vm = this;
            vm.dt =[];
            vm.getDetail = function() {
                $http.get('/api/detail/' + $stateParams.dt , $stateParams.dt)
                    .then(function(response) {
                        vm.dt = response.data;
                        console.log(response.data);
                    });
            };
            vm.getDetail();

HTML：

 <ul ng-repeat="d in vm.dt"> 
<li>{{d.name}}</li> 
<li>{{d.age}}</li>
 </ul>

什么也没显示。 我尝试更改为

vm.dt.push(response.data) 

而且有效。 所以我想问为什么我上面的代码不起作用。 感谢您的帮助

Answer 1

您的http调用的输出是一个对象。 您将现有的数组引用vm.dt覆盖为回调内的对象，然后尝试循环遍历模板内的数组。

尝试以字典方式更改ng-repeat 。

<ul ng-repeat="(key, value) in vm.dt"> 
 <li>{{key}} {{value}}</li> 
</ul>

我尝试更改为vm.dt.push（response.data）并成功。

因为以这种方式您仍然使用数组，因此ng-repeat将起作用

仅过滤姓名和年龄，您可以使用ng-if或自定义过滤器

<ul ng-repeat="(key, value) in vm.dt" ng-if="key === 'name' || key === 'age'"> 
 <li>{{key}} {{value}}</li> 
</ul>

Answer 2

ng-repeat有两种选择：

1. 宾语
2. 数组

如果您在ng-repeat中使用object则需要使用如下所示的对象：

<ul ng-repeat="(key, value) in vm.dt">  
   <li> {{ key }} : {{ value }}</li>  
</ul>

如果您在ng-repeat中使用array则可以执行以下操作：

<ul ng-repeat="d in vm.dt">  
    <li>{{ d.name}}</li> 
    <li>{{ d.age}}</li> 
</ul>

现在了解这里发生了什么，您正在从服务器获得响应，该服务器是一个object并且正在将该object分配给变量，并尝试像array一样打印它，但不要忘记它是一个对象，因此它不会打印。

当您执行vm.dt.push(response.data)您正在将对象推入数组中，现在您正在正确地进行操作。 因此它正在打印您的数据。

我希望这将有所帮助。

谢谢。

编辑

如果要显示特定字段，则应使用vm.dt.push(response.data) ，然后使用它

<ul ng-repeat="d in vm.dt">  
    <li>{{ d.name}}</li> 
    <li>{{ d.age}}</li> 
</ul>

您可以在此代码中看到，无需过滤任何仅打印要显示的数据的内容。 因此，以我的理解，从性能的角度来看，这是很好的。

Answer 3

您正在使用controllerAs synthax:。

var vm = this; 表示您应该在视图中使用控制器别名 （这并不意味着它是vm ）。

这是一个控制器别名为main的示例：

<div ng-controller="MainCtrl as main">
  <ul ng-repeat="d in main.dt"> 
    <li>{{d.name}}</li> 
    <li>{{d.age}}</li>
  </ul>
</div>