错误：不允许在中继器中复制。新增的曲目由$指数却没有显示

Question

我的web服务数据返回这个字符串：

[{CardNumber:"1234567",CardType:"OPI",CardBalance:"100", 
    CardImage:"img/omnipay_card.png"}, 
{CardNumber:"5678967",CardType:"MMTC",CardBalance:"200", 
    CardImage:"img/mmtc_card.png"}, 
{CardNumber:"1011167",CardType:"SEAFR",CardBalance:"300", 
    CardImage:"img/seafarers_card.png"} 
] 

，我试图通过$指数在HTML代码中添加跟踪修正错误：

<ion-slide-page ng-repeat="card in cardNumbers track by $index" 
     id="mainMenu-slide24" 
     style="background:url(&quot;{{card.CardImage}}&quot;) no-repeat center;background-size:cover;"> 
<br><br><br><br><br><br><br><br><br><br> 
<h5>Card Number:{{card.CardNumber}}</h5> 
<p><h5>Balance:{{card.CardBalance}}</h5> 
</ion-slide-page> 

错误已经消失了，但数据和图像仍然没有显示。可能是什么问题呢？

Answer 1

代码实际工作正常，检查你的CSS，尝试删除我不认为有必要的BR标签，

var myApp=angular.module('myApp',[]) 
 
myApp.controller('myController',function($scope){ 
 
    
 
    $scope.cardNumbers = [{CardNumber:"1234567",CardType:"OPI",CardBalance:"100",CardImage:"img/omnipay_card.png"},{CardNumber:"5678967",CardType:"MMTC",CardBalance:"200",CardImage:"img/mmtc_card.png"},{CardNumber:"1011167",CardType:"SEAFR",CardBalance:"300",CardImage:"img/seafarers_card.png"}]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app='myApp' ng-controller='myController as vm'> 
 
<div ng-repeat="card in cardNumbers track by $index" > 
 
<h5>Card Number:{{card.CardNumber}}</h5><p><h5>Balance:{{card.CardBalance}}</h5></div> 
 
</div>