范圍變量錯誤：無法讀取未定義的屬性…

Question

在我的代碼中，我有一張桌子，我想用單擊的行填寫表格。 桌子：

<table class="table table-striped">
<thead>
<tr>
    <th>#</th>
    <th>project</th>
    <th>start</th>
    <th>end</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="booking in myBookingsList" ng-click="bookingClicked(booking)">
    <td>{{$index + 1}}</td>
    <td>{{booking.usersProjects.project.name}}</td>
    <td>{{booking.start | date:'yyyy-MM-dd HH:mm:ss' }}</td>
    <td>{{booking.end | date:'yyyy-MM-dd HH:mm:ss' }}</td>
</tr>
</tbody>

這是ng-click的功能：

$scope.bookingClicked = function(booking){
    $scope.newBooking = {};
    $scope.newBooking.project = booking.usersProjects.project.name;
    $scope.newBooking.id = booking.id;
    $scope.newBooking.startDate = $filter('date')(booking.start, "yyyy-MM-dd");
    $scope.newBooking.startTime = new Date(booking.start);
    $scope.newBooking.endDate = $filter('date')(booking.end, "yyyy-MM-dd");
    $scope.newBooking.endTime = new Date(booking.end);
};

問題是我得到的第二行

TypeError: Cannot read property 'project' of undefined

那么這是什么問題呢？ 應用程序的另一部分從中獲取數據並提交。 這工作正常，我在那里

$scope.newBooking = {};
//timepicker values must be initialized
$scope.newBooking.startTime = new Date();
$scope.newBooking.endTime = new Date();

這是一個預訂對象的示例，該對象被饋送到函數：

{
    "id": 50,
    "self": "http://localhost:8080/timetracker-backend/timetracker/booking/50",
    "start": 1434103331000,
    "end": 1434110531000,
    "usersProjects": {
        "id": 43,
        "self": "http://localhost:8080/timetracker-backend/timetracker/usersprojects/43",
        "user": {
            "id": 1,
            "self": "http://localhost:8080/timetracker-backend/timetracker/user/1",
            "name": "timetrackerAdmin",
            "role": "ADMIN"
        },
        "project": {
            "id": 42,
            "self": "http://localhost:8080/timetracker-backend/timetracker/project/42",
            "name": "project four",
            "description": "description p4"
        }
    }
}

這看起來和我相似嗎？

Answer 1

在$ scope.newBooking = {};中

沒有對象名稱項目，因此顯示控制台錯誤，您可以在答案中創建一個空對象，如下所示

 $scope.newBooking.project = {}; 

它的意思是

$scope.newBooking= {
project : {} 
} 

您按上述代碼行工作，現在$ scope.newBooking具有或知道上述項目對象 ，因此工作正常

Answer 2

偶然我找到了解決方案。 如果我添加$scope.newBooking.project = {}; ，則可以正常工作$scope.newBooking.project = {};

所以現在的功能是

$scope.bookingClicked = function(booking){
    $scope.newBooking = {};
    $scope.newBooking.project = {};
    $scope.newBooking.project = booking.usersProjects.project.name;
    $scope.newBooking.id = booking.id;
    $scope.newBooking.startDate = $filter('date')(booking.start, "yyyy-MM-dd");
    $scope.newBooking.startTime = new Date(booking.start);
    $scope.newBooking.endDate = $filter('date')(booking.end, "yyyy-MM-dd");
    $scope.newBooking.endTime = new Date(booking.end);
};

但是誰能告訴我為什么這僅適用於這條額外的線，誰會被接受。