Angular：无法读取未定义的属性“id”

Question

我试图在用户选择游戏时加载玩家列表，但是我收到 Cannot read property 'id' of undefined at m.$scope.getPlayers (campaigns-players.js:104)

我在另一个页面上使用了类似的方法，但是它在这个页面上给了我这个错误，所以我不太确定这次我做错了什么。感谢您的帮助！

HTML；

<div class="card-body">

                    <div class="form-group">

                        <label class="col-md-3 col-form-label">List of Games</label>

                        <select class="form-control" id="gameList" ng-model="game" ng-change="getPlayers()">

                            <option ng-repeat="game in allGames" ng-value="{{game.id}}"> {{game.name}}</option>

                        </select>

                    </div>

                    <div class="form-group">

                        <label for="name">List of Players</label>

                        <select class="form-control" id="ccmonth" ng-model="selectedPlayer">

                            <option ng-repeat="player in players" ng-value="{{player.id}}"> {{player.name}}</option>

                        </select>

                    </div>

                    <div class="form-group">

                        <label class="col-md-3 col-form-label">Player Name</label>

                        <input type="text" class="form-control" id="entityNameUpdate" ng-model="entityNameUpdate">

                    </div>

                    <div class="form-group">

                        <label for="name">Which game player in?</label>

                        <select class="form-control" id="updatedGamePlayer" ng-model="updatedGame">

                            <option ng-repeat="updatedGame in allGames" ng-value="{{updatedGame.id}}"> {{updatedGame.name}}</option>

                        </select>

                    </div>

                    <div class="col-sm-4">

                        <button type="submit" class="btn btn-sm btn-primary" ng-click="save()"><i class="fa fa-dot-circle-o"></i>

                            Save</button>

                    </div>

Answer 1

解决方案1HTML：<select class="form-control" id="gameList" ng-model="game" ng-change="getPlayers()"><option ng-repeat="game in allGames" ng-value="{{game.id}}"> {{game.name}}</option></select>在 getPlayers() 中var url = apiUrl + "/game/" + $scope.game;解决方案2：HTML：<select class="form-control" id="gameList" ng-model="game" ng-change="getPlayers()"><option ng-repeat="game in allGames" ng-value="{{game}}"> {{game.name}}</option></select>在 getPlayers() 中var url = apiUrl + "/game/" + $scope.game.id;运行以下代码片段&nbsp; angular&nbsp; &nbsp; .module('myapp',[])&nbsp; &nbsp; .controller('ctrl', function($scope){&nbsp; &nbsp; &nbsp;$scope.game;&nbsp; &nbsp; &nbsp;$scope.allGames=[&nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp;name:"GTA",&nbsp; &nbsp; &nbsp; &nbsp;id:1&nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; name:"PUBG",&nbsp; &nbsp; &nbsp; &nbsp;id:2&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp;];&nbsp; &nbsp; &nbsp;$scope.getPlayers= function () {&nbsp; &nbsp; &nbsp; &nbsp; var url = "apiUrl/game/" + $scope.game.id;&nbsp; &nbsp; &nbsp; &nbsp; console.log(url);&nbsp; &nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script><div ng-app="myapp" class="card-body">&nbsp; &nbsp; <div ng-controller="ctrl" class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <label class="col-md-3 col-form-label">List of Games</label>&nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control" id="gameList" ng-model="game" ng-change="getPlayers()">&nbsp; &nbsp; &nbsp; &nbsp; <option ng-repeat="game in allGames" ng-value="game"> {{game.name}}</option>&nbsp; &nbsp; &nbsp; &nbsp; </select></div></div>

Answer 2

将此处的 ng-value 从 game 更改为 game.id<div class="card-body">&nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <label class="col-md-3 col-form-label">List of Games</label>&nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control" id="gameList" ng-model="game" ng-change="getPlayers()">&nbsp; &nbsp; &nbsp; &nbsp; <option ng-repeat="game in allGames" ng-value="{{game.id}}"> {{game.name}}</option>&nbsp; &nbsp; &nbsp; &nbsp; </select></div>在js代码中定义$scope.game;$scope.game;&nbsp;$scope.getPlayers = function () {&nbsp; &nbsp; &nbsp; &nbsp; var url = apiUrl + "/game/" + $scope.game.id;&nbsp; &nbsp; &nbsp; &nbsp; $http.get(url, config)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(function (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (response.data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.players = response.data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.showErrorMessage("Player not found");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function (error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.responseErrorCheck(error);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; };