Ionic "track by" tinder 卡片错误
Ionic "track by" error with tinder cards
我两周前开始学习 Ionic，现在我正在创建一个小项目 practice.You 可以从我的 Github 下载我的项目：https://github.com/KaanYildirim/ionicTest
我正在尝试使用由 ionic 团队本身创建的类似于 tinder 的卡片。 (https://github.com/driftyco/ionic-ion-tinder-cards)
我已经用 "track by" 表达式尝试了所有可能的解决方案，但我仍然收到此错误：
错误：[ngRepeat:dupes]不允许在转发器中重复。使用 'track by' 表达式指定唯一键。中继器：卡片中的卡片由 card.id 跟踪，重复键：未定义，重复值：未定义
我尝试用 "track by $index" 和 "track by card.id " 修复这个错误（每张卡片在 .Json 文件中都有一个 "id" 属性）但是没有成功.我想我犯了一个小错误，找不到它。
有人可以帮助我吗？谢谢
index.html:
<td-cards>
<td-card ng-repeat="card in cards track by card.id" on-destroy="cardDestroyed($index)" on-swipe="cardSwiped($index)">
<div class="list card myCard">
<!-- Card Header-->
<div class="item topicDescription cardHeader">
<p>{{card.topicDescription}}</p>
</div>
<!-- Card Body-->
<div class="item item-body noBorder">
<img class="full-image" src="{{card.image}}">
<h3 class="cardTitle">{{card.title}}</h3>
<p>{{card.summary}}</p>
</div>
<!-- Card Footer-->
<div class="item tabs tabs-secondary tabs-icon-left cardFooter">
<a class="tab-item" ng-click="readMore($index)" href="#">
<i class="{{card.actionButtonIcon}}"></i>
{{card.actionButtonText}} {{card.type}} ( {{card.additionalInfo}} )
</a>
<a class="tab-item" ng-click="share($index)" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
</td-card>
</td-cards>
Json 文件：
{
"articles": [
{
"id":1,
"topicDescription": "Find a Idea",
"image": "img/uber.jpg",
"title": "Uber Lowers Fares In Over 100 Cities",
"summary": "Uber is lowering prices in over 100 U.S. and Canadian cities, effective tomorrow. January is a slower month for the car service and the company says it is reducing fares in order to increase demand.",
"link": "http://techcrunch.com/2016/01/08/uber-lowers-fares-in-over-100-cities/",
"actionButtonIcon": "icon ion-ios-glasses-outline",
"actionButtonText": "Read",
"type":"Article",
"additionalInfo": "3 min"
},
{
"id":2,
"topicDescription": "Test a Idea",
"image": "img/lean.jpg",
"title": "The Lean Startup",
"summary": "Great book about startups and how to validate your idea without spending to much money and time.",
"link": "http://www.amazon.de/Lean-Startup-Innovation-Successful-Businesses/dp/0670921602/ref=sr_1_2?ie=UTF8&qid=1452779528&sr=8-2&keywords=the+lean+startup",
"actionButtonIcon": "icon ion-ios-bookmarks-outline",
"actionButtonText": "Buy",
"type":"Book",
"additionalInfo": "Amazon"
},
{
"id":3,
"topicDescription": "Build",
"image": "img/evernote.jpg",
"title": "Note Taking App",
"summary": "From short lists to lengthy research, no matter what form your writing takes, Evernote keeps you focused on moving those ideas from inspiration to completion.",
"link": "https://evernote.com/?var=3",
"actionButtonIcon": "icon ion-hammer",
"actionButtonText": "Download",
"type":"App",
"additionalInfo": "App Store"
},
{
"id":4,
"topicDescription": "Measure",
"image": "img/steve.jpg",
"title": "Steve Blank: How to Build a Great Company",
"summary": "Join Silicon Valley serial entrepreneur-turned-educator Blank in a lively discussion with Dan'l Lewin of Microsoft. This program will introduce best practices, lessons and tips that have swept the startup world, offering a wealth of proven advice and information for entrepreneurs of all stripes.",
"link": "https://www.youtube.com/watch?v=1RTcXwJuCaU",
"actionButtonIcon": "icon ion-ios-videocam-outline",
"actionButtonText": "Watch",
"type":"Video",
"additionalInfo": "Youtube"
},
{
"id":5,
"topicDescription": "Find a Idea",
"image": "img/uber.jpg",
"title": "Uber Lowers Fares In Over 100 Cities",
"summary": "Uber is lowering prices in over 100 U.S. and Canadian cities, effective tomorrow. January is a slower month for the car service and the company says it is reducing fares in order to increase demand.",
"link": "http://techcrunch.com/2016/01/08/uber-lowers-fares-in-over-100-cities/",
"actionButtonIcon": "icon ion-ios-glasses-outline",
"actionButtonText": "Read",
"type":"Article",
"additionalInfo": "3 min"
},
{
"id":6,
"topicDescription": "Test a Idea",
"image": "img/lean.jpg",
"title": "The Lean Startup",
"summary": "Great book about startups and how to validate your idea without spending to much money and time.",
"link": "http://www.amazon.de/Lean-Startup-Innovation-Successful-Businesses/dp/0670921602/ref=sr_1_2?ie=UTF8&qid=1452779528&sr=8-2&keywords=the+lean+startup",
"actionButtonIcon": "icon ion-ios-bookmarks-outline",
"actionButtonText": "Buy",
"type":"Book",
"additionalInfo": "Amazon"
},
{
"id":7,
"topicDescription": "Build",
"image": "img/evernote.jpg",
"title": "Note Taking App",
"summary": "From short lists to lengthy research, no matter what form your writing takes, Evernote keeps you focused on moving those ideas from inspiration to completion.",
"link": "https://evernote.com/?var=3",
"actionButtonIcon": "icon ion-hammer",
"actionButtonText": "Download",
"type":"App",
"additionalInfo": "App Store"
},
{
"id":8,
"topicDescription": "Measure",
"image": "img/steve.jpg",
"title": "Steve Blank: How to Build a Great Company",
"summary": "Join Silicon Valley serial entrepreneur-turned-educator Blank in a lively discussion with Dan'l Lewin of Microsoft. This program will introduce best practices, lessons and tips that have swept the startup world, offering a wealth of proven advice and information for entrepreneurs of all stripes.",
"link": "https://www.youtube.com/watch?v=1RTcXwJuCaU",
"actionButtonIcon": "icon ion-ios-videocam-outline",
"actionButtonText": "Watch",
"type":"Video",
"additionalInfo": "Youtube"
}
]
}
我检查了你的code。在您的 controllers.js 文件中，您通过手动将未定义的卡片添加到列表中来处理 cardSwiped 事件
$scope.cardSwiped = function(index) {
var newCard = // new card data
$scope.cards.push(newCard);
};
这会导致您的卡片有多个未定义的元素，ng-repeat 将被迫将其作为重复项处理。 Remove/fix 那个处理程序和东西应该工作。
顺便说一句，这段代码将正常工作，因为 javascript 会将它们作为一行处理 var newCard = $scope.cards.push(newCard); 这意味着在函数的末尾，您的 newCard 变量将具有卡片数组的新长度.
我两周前开始学习 Ionic，现在我正在创建一个小项目 practice.You 可以从我的 Github 下载我的项目：https://github.com/KaanYildirim/ionicTest
我正在尝试使用由 ionic 团队本身创建的类似于 tinder 的卡片。 (https://github.com/driftyco/ionic-ion-tinder-cards)
我已经用 "track by" 表达式尝试了所有可能的解决方案，但我仍然收到此错误：
错误：[ngRepeat:dupes]不允许在转发器中重复。使用 'track by' 表达式指定唯一键。中继器：卡片中的卡片由 card.id 跟踪，重复键：未定义，重复值：未定义
我尝试用 "track by $index" 和 "track by card.id " 修复这个错误（每张卡片在 .Json 文件中都有一个 "id" 属性）但是没有成功.我想我犯了一个小错误，找不到它。
有人可以帮助我吗？谢谢
index.html:
<td-cards>
<td-card ng-repeat="card in cards track by card.id" on-destroy="cardDestroyed($index)" on-swipe="cardSwiped($index)">
<div class="list card myCard">
<!-- Card Header-->
<div class="item topicDescription cardHeader">
<p>{{card.topicDescription}}</p>
</div>
<!-- Card Body-->
<div class="item item-body noBorder">
<img class="full-image" src="{{card.image}}">
<h3 class="cardTitle">{{card.title}}</h3>
<p>{{card.summary}}</p>
</div>
<!-- Card Footer-->
<div class="item tabs tabs-secondary tabs-icon-left cardFooter">
<a class="tab-item" ng-click="readMore($index)" href="#">
<i class="{{card.actionButtonIcon}}"></i>
{{card.actionButtonText}} {{card.type}} ( {{card.additionalInfo}} )
</a>
<a class="tab-item" ng-click="share($index)" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
</td-card>
</td-cards>
Json 文件：
{
"articles": [
{
"id":1,
"topicDescription": "Find a Idea",
"image": "img/uber.jpg",
"title": "Uber Lowers Fares In Over 100 Cities",
"summary": "Uber is lowering prices in over 100 U.S. and Canadian cities, effective tomorrow. January is a slower month for the car service and the company says it is reducing fares in order to increase demand.",
"link": "http://techcrunch.com/2016/01/08/uber-lowers-fares-in-over-100-cities/",
"actionButtonIcon": "icon ion-ios-glasses-outline",
"actionButtonText": "Read",
"type":"Article",
"additionalInfo": "3 min"
},
{
"id":2,
"topicDescription": "Test a Idea",
"image": "img/lean.jpg",
"title": "The Lean Startup",
"summary": "Great book about startups and how to validate your idea without spending to much money and time.",
"link": "http://www.amazon.de/Lean-Startup-Innovation-Successful-Businesses/dp/0670921602/ref=sr_1_2?ie=UTF8&qid=1452779528&sr=8-2&keywords=the+lean+startup",
"actionButtonIcon": "icon ion-ios-bookmarks-outline",
"actionButtonText": "Buy",
"type":"Book",
"additionalInfo": "Amazon"
},
{
"id":3,
"topicDescription": "Build",
"image": "img/evernote.jpg",
"title": "Note Taking App",
"summary": "From short lists to lengthy research, no matter what form your writing takes, Evernote keeps you focused on moving those ideas from inspiration to completion.",
"link": "https://evernote.com/?var=3",
"actionButtonIcon": "icon ion-hammer",
"actionButtonText": "Download",
"type":"App",
"additionalInfo": "App Store"
},
{
"id":4,
"topicDescription": "Measure",
"image": "img/steve.jpg",
"title": "Steve Blank: How to Build a Great Company",
"summary": "Join Silicon Valley serial entrepreneur-turned-educator Blank in a lively discussion with Dan'l Lewin of Microsoft. This program will introduce best practices, lessons and tips that have swept the startup world, offering a wealth of proven advice and information for entrepreneurs of all stripes.",
"link": "https://www.youtube.com/watch?v=1RTcXwJuCaU",
"actionButtonIcon": "icon ion-ios-videocam-outline",
"actionButtonText": "Watch",
"type":"Video",
"additionalInfo": "Youtube"
},
{
"id":5,
"topicDescription": "Find a Idea",
"image": "img/uber.jpg",
"title": "Uber Lowers Fares In Over 100 Cities",
"summary": "Uber is lowering prices in over 100 U.S. and Canadian cities, effective tomorrow. January is a slower month for the car service and the company says it is reducing fares in order to increase demand.",
"link": "http://techcrunch.com/2016/01/08/uber-lowers-fares-in-over-100-cities/",
"actionButtonIcon": "icon ion-ios-glasses-outline",
"actionButtonText": "Read",
"type":"Article",
"additionalInfo": "3 min"
},
{
"id":6,
"topicDescription": "Test a Idea",
"image": "img/lean.jpg",
"title": "The Lean Startup",
"summary": "Great book about startups and how to validate your idea without spending to much money and time.",
"link": "http://www.amazon.de/Lean-Startup-Innovation-Successful-Businesses/dp/0670921602/ref=sr_1_2?ie=UTF8&qid=1452779528&sr=8-2&keywords=the+lean+startup",
"actionButtonIcon": "icon ion-ios-bookmarks-outline",
"actionButtonText": "Buy",
"type":"Book",
"additionalInfo": "Amazon"
},
{
"id":7,
"topicDescription": "Build",
"image": "img/evernote.jpg",
"title": "Note Taking App",
"summary": "From short lists to lengthy research, no matter what form your writing takes, Evernote keeps you focused on moving those ideas from inspiration to completion.",
"link": "https://evernote.com/?var=3",
"actionButtonIcon": "icon ion-hammer",
"actionButtonText": "Download",
"type":"App",
"additionalInfo": "App Store"
},
{
"id":8,
"topicDescription": "Measure",
"image": "img/steve.jpg",
"title": "Steve Blank: How to Build a Great Company",
"summary": "Join Silicon Valley serial entrepreneur-turned-educator Blank in a lively discussion with Dan'l Lewin of Microsoft. This program will introduce best practices, lessons and tips that have swept the startup world, offering a wealth of proven advice and information for entrepreneurs of all stripes.",
"link": "https://www.youtube.com/watch?v=1RTcXwJuCaU",
"actionButtonIcon": "icon ion-ios-videocam-outline",
"actionButtonText": "Watch",
"type":"Video",
"additionalInfo": "Youtube"
}
]
}
我检查了你的code。在您的 controllers.js 文件中，您通过手动将未定义的卡片添加到列表中来处理 cardSwiped 事件
$scope.cardSwiped = function(index) {
var newCard = // new card data
$scope.cards.push(newCard);
};
这会导致您的卡片有多个未定义的元素，ng-repeat 将被迫将其作为重复项处理。 Remove/fix 那个处理程序和东西应该工作。
顺便说一句，这段代码将正常工作，因为 javascript 会将它们作为一行处理 var newCard = $scope.cards.push(newCard); 这意味着在函数的末尾，您的 newCard 变量将具有卡片数组的新长度.