不允许转发器中的 Angular/MVC 重复答案

【问题标题】：Angular/MVC Duplicates In Repeater Are Not Allowed不允许转发器中的 Angular/MVC 重复
【发布时间】：2017-03-25 20:01:41
【问题描述】：

首先，这是导致我遇到错误的所有代码：

JSON：

[
  {
    "Id": 0,
    "UserName": "uniqueusername",
    "Photo": "base64string",
    "Email": "user@user.com",
    "Office": "Location "
  },
  {
    "Id": 1,
    "UserName": "uniqueusername",
    "Photo": "base64string",
    "Email": "user@user.com",
    "Office": "Location"
  },
  {
    "Id": 2,
    "UserName": "uniqueusername",
    "Photo": "base64string",
    "Email": "user@user.com",
    "Office": "Location"
  },
  {
    "Id": 3,
    "UserName": "uniqueusername",
    "Photo": "base64string",
    "Email": "user@user.com",
    "Office": "Location"
  },
  {
    "Id": 4,
    "UserName": "uniqueusername",
    "Photo": "base64string",
    "Email": "user@user.com",
    "Office": "Location"
  }
]

它是在我的控制器中使用这个函数生成的：

List<string> Names = arepo.GetAllAvionteUsers();
List<UserPreviewViewModel> AllUsers = new List<UserPreviewViewModel>();
int count = 0;
foreach(string name in Names)
{

    UserPreviewViewModel preview = new UserPreviewViewModel(name);
    preview.Id = count;
    AllUsers.Add(preview);

    count++;

    if (count == 10) break;
}

return Json(new { Users = JsonConvert.SerializeObject(AllUsers, Formatting.Indented, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore}) }, JsonRequestBehavior.AllowGet);

视图模型：

public int Id { get; set; }
public string UserName { get; set; }
public string Photo { get; set; }
public string Email { get; set; }
public string Office { get; set; }

角度控制器：

angular.module('app.module')
.factory('Users', ['$http', function UsersFactory($http) {
    return {
        AllUsers: function () {
            return $http({ method: 'GET', url: '/Controller/GetAllUsers' });
        }
    }
}]);

angular.module('app.module')
.controller('UserController', ['$scope', 'Users', function ($scope, Users) {

    var vm = this;


    Users.AllUsers().success(function (data) {
        vm.users = JSON.stringify(data.Users);
    });

}]);

最后是视图：

<table class="dataTable row-border hover" datatable="ng" dt-instance="vm.dtInstance"
       dt-options="vm.dtOptions">
    <thead>
        <tr>
            <th class="secondary-text">
                <div class="table-header">
                    <span class="column-title">Id</span>
                </div>
            </th>
            <th class="secondary-text">
                <div class="table-header">
                    <span class="column-title">Name</span>
                </div>
            </th>
            <th class="secondary-text">
                <div class="table-header">
                    <span class="column-title">Photo</span>
                </div>
            </th>
            <th class="secondary-text">
                <div class="table-header">
                    <span class="column-title">Email</span>
                </div>
            </th>
            <th class="secondary-text">
                <div class="table-header">
                    <span class="column-title">Office</span>
                </div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="user in vm.users">
            <td>{{user.Id}}</td>
            <td>{{user.UserName}}</td>
            <td><img class="product-image" ng-src="data:img/jpg;base64,{{user.Photo}}"></td>
            <td>{{user.EmailAddress}}</td>
            <td>{{user.Office}}</td>
        </tr>
    </tbody>
</table>

每次我尝试运行此代码时，我都会从我的 JSON 中收到以下错误：

angular.js:13920 错误：[ngRepeat:dupes] 转发器中的重复项是不允许。使用“track by”表达式指定唯一键。中继器：vm.users 中的用户，重复键：字符串：\，重复值： \

我尝试使用 angular 建议的修复方法，它是由 $index 跟踪的，所有这些都会导致我的页面冻结。

当我返回 JSON 字符串时，我试图取出 Formatting.Indented，但所做的只是给我同样的错误，同时取出 ReferenceLoopHandling 部分并得到同样的错误。

在角度控制器中，我尝试执行 JSON.parse(data)，但出现以下错误：

angular.js:13920 SyntaxError: 位置 1 处 JSON 中的意外标记 o

当我尝试执行 let users = data.Users 然后执行 let count = users.length 时，它给了我数字 85941，它似乎在计算字符串中的每个字符。

当我执行 console.log(data) 时，它会给我上面粘贴的 JSON（我确实更改了用户名、电子邮件和位置以保证我的用户信息安全）。

目前我完全不知道这里出了什么问题或如何解决它，任何帮助将不胜感激。

谢谢！

【问题讨论】：

我也试过track by user.Id得到Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: user in vm.users track by user.Id, Duplicate key: undefined, Duplicate value:
jQuery 数据表是否可能导致问题？或者你得到的 JSON 可能不是你想象的那样。没有通过this plunker 使用您的 JSON 进行复制
@ryanyuyu 我尝试了你的解决方案，但我仍然遇到同样的错误
是的，我无法重现该错误。我认为还有其他事情正在发生。试着把你的错误变成一个更小的minimal reproducible example（强调最小）。例如，错误消息似乎表明您的 MVC 控制器正在返回一些空/空条目。

标签： angularjs json asp.net-mvc

【解决方案1】：

虽然我不完全确定为什么首先会发生此错误，但解决方法是不从控制器返回 JSON。我像这样修改了我的退货声明：

return Json(JsonConvert.SerializeObject(AllUsers, Formatting.Indented, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore}), JsonRequestBehavior.AllowGet);

然后在我做的角度控制器中：

vm.users = JSON.parse(data);

这给了我正确的 JSON 数组，现在它可以完美运行了。

【讨论】：