ng-repeat不使用已解析的数据?

时间:2017-05-24 19:21:04

标签: angular

我正在升级应用并通过服务将数据传递给控制器​​,控制器将其解析并将其传递给模板。

顶部绑定显示数据但重复不通过它们循环说它们未定义。

我在这里错过了什么?

控制器代码:

ngOnInit(){
  this.stats.getCustStats()
     .then(custStats => this.customerStats = custStats.data)
     .then(error => console.log(error))
}

模板代码:

<div class="col-xs-6"># Customers :{{customerStats.length}}</div>
<!--<div class="col-xs-6"># Views :{{$ctrl.customerStats | sumOfValue:'views'}}</div>
<div class="col-xs-6"># Clicks :{{$ctrl.customerStats | sumOfValue:'clicks'}}</div>
<div class="col-xs-6"># Leads :{{$ctrl.customerStats | sumOfValue:'leads'}}</div>-->

<div class="col-xs-12" ng-repeat="customer in customerStats">
    <h3>{{customer}}</h3>
    <div class="col-xs-3"> Views : {{customer.views}}</div>
    <div class="col-xs-3"> Clicks : {{customer.clicks}} </div>
    <div class="col-xs-3"> Leads : {{customer.leads}}</div>
</div>

customerStats.length显示长度,但ng-repeat未显示并抛出错误,因为它未定义。

1 个答案:

答案 0 :(得分:1)

我注意到你正在使用函数ngOnInit。这是来自Angular 2-4 所以你的ng-repeat是行不通的。正确的语法:

<div *ngFor="let customer of customerStats;">
  {{customer.something}}
</div>

另外,你的引导程序是错误的。 Cols应始终以行开头。正确的方法:

<div class="col-md-12" *ngFor="let customer of customerStats;">
  <div class="row">
    <div class="col-md-3">{{customer.something}}</div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
  </div>

</div>