錯誤：[ngRepeat:dupes] 不允許在轉發器中重複。使用“track by”表達式指定唯一鍵 (Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys)

問題描述

錯誤：[ngRepeat:dupes] 不允許在轉發器中重複。使用“track by”表達式指定唯一鍵 (Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys)

有沒有人可以幫助我如何處理這個錯誤，我不知道這個問題發生了什麼，我只想使用角度語法（ng‑repeat）顯示從數據庫服務器到 html 的 json 數組，但我得到了一個錯誤說 Error: [ngRepeat:dupes] 不允許在轉發器中重複。使用“track by”表達式指定唯一鍵。中繼器：datatemans中的datateman，重複鍵：字符串：“，重複值：”

這是代碼..

     <div class="bar bar‑header">
    <button class="button button‑icon icon ion‑navicon"></button>
    <div class="h1 title">Data Teman</div>
    <button class="button button‑clear button‑positive">LogOut</button>
  </div>

<ion‑view>
    <ion‑content padding="false" class="has‑header">
        <ion‑refresher
            pulling‑text="Pull to refresh..."
            on‑refresh="showData()">
          </ion‑refresher>
        <ion‑list show‑Delete = "data.showDelete" show‑Reorder = "data.showReorder">
            <ion‑item class="item‑avatar item‑icon‑right" ng‑repeat="datateman in datatemans" type="item‑text‑wrap" href="#/tab/teman/{{datateman.id}}">
                <img ng‑src="{{datateman.icon}}">
                <i class="icon ion‑ios7‑arrow‑right"></i>
                <h2>{{datateman.username}}
                    <br> 
                    <font size="2" color="gray" >Spesialis : {{datateman.password}}</font>
                </h2>
                <ion‑delete‑button class="ion‑minus‑circled" ng‑click="delete(datateman);"></ion‑delete‑button>
            </ion‑item>
        </ion‑list>
    </ion‑content>
</ion‑view>

這是我得到的代碼json數組..

.factory('temanService', function($http) {
    var baseUrl = 'http://dwellingtime.net23.net/DwellingTime/';
    return {
        getAll: function() {
            return $http.get(baseUrl+'select.php');
        },
        getId: function (temanId){
            return $http.get(baseUrl+'select_id.php?id='+temanId); 
        },
        create: function (datateman){
            return $http.post(baseUrl+'insert.php',datateman,{
                headers: {
                    'Content‑Type': 'application/x‑www‑form‑urlencoded; charset=UTF‑8;'
                }
            });
        },
        update: function (datateman){
            return $http.post(baseUrl+'update.php',datateman,{
                headers: {
                    'Content‑Type': 'application/x‑www‑form‑urlencoded; charset=UTF‑8;'
                }
            });
        },
        delete: function  (id){
            return $http.get(baseUrl+'delete.php?id='+id);
        }
    };

});

參考解法

方法 1:

The acutal problem is described here

AngularJS does not allow duplicates in a ng‑repeat directive. This means if you are trying to do the following, you will get an error.

<div ng‑repeat="item in [a,a,a]">

However, changing the above code slightly to define an index to determine uniqueness,

<div ng‑repeat="item in [a,a,a] track by $index">

Replace your ng‑repeat="datateman in datatemans" by ng‑repeat="datateman in datatemans track by $index"

html

<div class="bar bar‑header">
    <button class="button button‑icon icon ion‑navicon"></button>
    <div class="h1 title">Data Teman</div>
    <button class="button button‑clear button‑positive">LogOut</button>
</div>
<ion‑view>
    <ion‑content padding="false" class="has‑header">
        <ion‑refresher pulling‑text="Pull to refresh..." on‑refresh="showData()">
        </ion‑refresher>
        <ion‑list show‑Delete="data.showDelete" show‑Reorder="data.showReorder">
            <ion‑item class="item‑avatar item‑icon‑right" ng‑repeat="datateman in datatemans track by $index" type="item‑text‑wrap" href="#/tab/teman/{{datateman.id}}">
                <img ng‑src="{{datateman.icon}}">
                <i class="icon ion‑ios7‑arrow‑right"></i>
                <h2>{{datateman.username}}
                   <br> 
                     <font size="2" color="gray" >Spesialis : {datateman.password}}</font>
                </h2>
                <ion‑delete‑button class="ion‑minus‑circled" ng‑click="delete(datateman);"></ion‑delete‑button>
            </ion‑item>
        </ion‑list>
    </ion‑content>
</ion‑view>

(by muhammad rossid noor ichsan、Muhsin Keloth)

參考文件

1. Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys (CC BY‑SA 2.5/3.0/4.0)