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

解决方案1

HTML：

<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;

运行以下代码片段

  angular

    .module('myapp',[])

    .controller('ctrl', function($scope){

     $scope.game;

     $scope.allGames=[

     {

       name:"GTA",

       id:1

     },

     {

      name:"PUBG",

       id:2

     }

     ];

     $scope.getPlayers= function () {

        var url = "apiUrl/game/" + $scope.game.id;

        console.log(url);

    }});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>

<div ng-app="myapp" class="card-body">

    <div ng-controller="ctrl" 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"> {{game.name}}</option>

        </select>

</div>

</div>

Answer 2

将此处的 ng-value 从 game 更改为 game.id

<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>

在js代码中定义$scope.game;

$scope.game;

 $scope.getPlayers = function () {

        var url = apiUrl + "/game/" + $scope.game.id;

        $http.get(url, config)

            .then(function (response) {

                    if (response.data) {

                        $scope.players = response.data;

                    } else {

                        $scope.showErrorMessage("Player not found");

                    }

                },

                function (error) {

                    $scope.responseErrorCheck(error);

                }

            );

    };