我正在升级应用并通过服务将数据传递给控制器,控制器将其解析并将其传递给模板。
顶部绑定显示数据但重复不通过它们循环说它们未定义。
我在这里错过了什么?
控制器代码:
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
未显示并抛出错误,因为它未定义。
答案 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>