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选项：

对象
阵列

如果您在object内使用ng-repeat，则需要使用以下内容：

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

如果您在array内使用ng-repeat，那么您可以这样做：

<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>

为什么我无法显示使用$ http.get获取的数据？

3 个答案: