javascript - 选择 ng-options raising $digest() iterations reached error

Question

我有一个 SELECT 元素定义如下:

<select class="form-control ng-pristine ng-untouched ng-valid" 
    ng-options="composer.Name for composer in composerList track by composer.Name | orderBy:'Name'" 
    ng-model="selectedComposer">

composerList 和 selectedComposer 在 Controller 中创建如下:

AlbumService.getComposerList().then(function (data) {
    $scope.composerList = data; //data comes from a REST response in the service
    $scope.selectedComposer = $scope.album.Composer;
});

composer 的结构只是简单的Id 和Name 属性，但它会在未来扩展。

问题出在上面的 SELECT 元素上。它正在抛出一些 10 $digest() 达到的迭代。正在中止! 错误。

    Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"fn: function() { return ngOptions.getTrackByValue(ngModelCtrl.$viewValue); }","newVal":["J","o","h","n"," ","W","i","l","i","a","m","s"],"oldVal":["J","o","h","n"," ","W","i","l","i","a","m","s"]},{"msg":"fn: interceptedExpression","newVal":138,"oldVal":121}],[{"msg":"fn: function() { return ngOptions.getTrackByValue(ngModelCtrl.$viewValue); }","newVal":["J","o","h","n"," ","W","i","l","i","a","m","s"],"oldVal":"..."},{"msg":"fn: interceptedExpression","newVal":155,"oldVal":138}],[{"msg":"fn: function() { return ngOptions.getTrackByValue(ngModelCtrl.$viewValue); }","newVal":["J","o","h","n"," ","W","i","l","i","a","m","s"],"oldVal":"..."},{"msg":"fn: interceptedExpression","newVal":172,"oldVal":155}],[{"msg":"fn: function() { return ngOptions.getTrackByValue(ngModelCtrl.$viewValue); }","newVal":["J","o","h","n"," ","W","i","l","i","a","m","s"],"oldVal":"..."},{"msg":"fn: interceptedExpression","newVal":189,"oldVal":172}],[{"msg":"fn: function() { return ngOptions.getTrackByValue(ngModelCtrl.$viewValue); }","newVal":["J","o","h","n"," ","W","i","l","i","a","m","s"],"oldVal":"..."},{"msg":"fn: interceptedExpression","newVal":206,"oldVal":189}]]
https://errors.angularjs.org/1.7.2/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22msg%22%3A%22fn%3A%20function()%20%7B%20return%20ngOptions.getTrackByValue(ngModelCtrl.%24viewValue)%3B%20%7D%22%2C%22newVal%22%3A%5B%22J%22%2C%22o%22%2C%22h%22%2C%22n%22%2C%22%20%22%2C%22W%22%2C%22i%22%2C%22l%22%2C%22i%22%2C%22a%22%2C%22m%22%2C%22s%22%5D%2C%22oldVal%22%3A%5B%22J%22%2C%22o%22%2C%22h%22%2C%22n%22%2C%22%20%22%2C%22W%22%2C%22i%22%2C%22l%22%2C%22i%22%2C%22a%22%2C%22m%22%2C%22s%22%5D%7D%2C%7B%22msg%22%3A%22fn%3A%20interceptedExpression%22%2C%22newVal%22%3A138%2C%22oldVal%22%3A121%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20function()%20%7B%20return%20ngOptions.getTrackByValue(ngModelCtrl.%24viewValue)%3B%20%7D%22%2C%22newVal%22%3A%5B%22J%22%2C%22o%22%2C%22h%22%2C%22n%22%2C%22%20%22%2C%22W%22%2C%22i%22%2C%22l%22%2C%22i%22%2C%22a%22%2C%22m%22%2C%22s%22%5D%2C%22oldVal%22%3A%22...%22%7D%2C%7B%22msg%22%3A%22fn%3A%20interceptedExpression%22%2C%22newVal%22%3A155%2C%22oldVal%22%3A138%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20function()%20%7B%20return%20ngOptions.getTrackByValue(ngModelCtrl.%24viewValue)%3B%20%7D%22%2C%22newVal%22%3A%5B%22J%22%2C%22o%22%2C%22h%22%2C%22n%22%2C%22%20%22%2C%22W%22%2C%22i%22%2C%22l%22%2C%22i%22%2C%22a%22%2C%22m%22%2C%22s%22%5D%2C%22oldVal%22%3A%22...%22%7D%2C%7B%22msg%22%3A%22fn%3A%20interceptedExpression%22%2C%22newVal%22%3A172%2C%22oldVal%22%3A155%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20function()%20%7B%20return%20ngOptions.getTrackByValue(ngModelCtrl.%24viewValue)%3B%20%7D%22%2C%22newVal%22%3A%5B%22J%22%2C%22o%22%2C%22h%22%2C%22n%22%2C%22%20%22%2C%22W%22%2C%22i%22%2C%22l%22%2C%22i%22%2C%22a%22%2C%22m%22%2C%22s%22%5D%2C%22oldVal%22%3A%22...%22%7D%2C%7B%22msg%22%3A%22fn%3A%20interceptedExpression%22%2C%22newVal%22%3A189%2C%22oldVal%22%3A172%7D%5D%2C%5B%7B%22msg%22%3A%22fn%3A%20function()%20%7B%20return%20ngOptions.getTrackByValue(ngModelCtrl.%24viewValue)%3B%20%7D%22%2C%22newVal%22%3A%5B%22J%22%2C%22o%22%2C%22h%22%2C%22n%22%2C%22%20%22%2C%22W%22%2C%22i%22%2C%22l%22%2C%22i%22%2C%22a%22%2C%22m%22%2C%22s%22%5D%2C%22oldVal%22%3A%22...%22%7D%2C%7B%22msg%22%3A%22fn%3A%20interceptedExpression%22%2C%22newVal%22%3A206%2C%22oldVal%22%3A189%7D%5D%5D
    at angular.js:138
    at Scope.$digest (angular.js:18625)
    at Scope.$apply (angular.js:18945)
    at done (angular.js:12799)
    at completeRequest (angular.js:13056)
    at XMLHttpRequest.requestLoaded (angular.js:12961)

我不知道为什么会出现这些错误。无论解决方案是什么，我都需要保留 album 变量中的 selectedComposer 变量设置，我更愿意保留 SELECT Composer 列表对象而不是 Composer 姓名的字符串列表。

感谢任何帮助。

Answer 1

对于以后可能会看到我的问题的其他人，我做了更多的研究，解决方案很简单。部分 ng-options 的轨道应该移动到字符串的末尾。

ng-options="composer.Name for composer in composerList | orderBy:'Name' track by composer.Name"