Ошибка интерполяции AngularJS - программирование

Я показываю свойства комнаты как часть приложения управления комнатой, над которым я работаю, это вывод:

Как вы можете видеть, значение Beamer (Projector in english) - "Sony (лампа 01/12/2013)". Этот вывод правильный, но когда я открываю консоль, я вижу некоторые ошибки в отношении интерполяции:

Большее разрешение:

"Can't interpolate: {{getBeamerString()}} TypeError: Cannot read property 'aanwezig' of undefined"

Это мой html partial:

<section class="eigenschappen">
    <table class="table table-striped table-hover table-bordered">
        <thead>
        <tr>
            <th>Eigenschap</th>
            <th>Waarde</th>
            <th>Bewerk</th>
        </tr>
        </thead>
        <tbody>

        ...

        <tr>
            <td><img class="ruimteNaam" src="../Images/Beamer.png" alt=""/>Beamer</td>
            <td>{{getBeamerString()}}</td>
            <td><img class="edit" src="../Images/Edit.png" alt=""/></td>
        </tr>

        ...

        </tbody>
    </table>
</section>

currentRuimte (CurrentRoom на английском языке) - это переменная, зависящая от области, которая получает свое значение, используя службу ресурсов, которая получает эти данные из моего mongoDB:

function RuimteController($scope, $routeParams, Ruimte) {

    $scope.currentRuimte = Ruimte.get({
        ruimteNaam: $routeParams.ruimteNaam
    });

    $scope.getBeamerString = function () {
        var beamer = $scope.currentRuimte.beamer;
        if(beamer.aanwezig == 'Ja'){
            return beamer.typeBeamer + ' (lamp: ' + beamer.datumLamp + ')';
        }else{
            return '-';
        }
    }
}

Когда я проверяю область с помощью batarang, я получаю следующее:

Почему я получаю ошибку и почему я все еще получаю правильный вывод? Есть ли способ предотвратить ошибку? Пожалуйста, исправьте меня столько, сколько сможете, Я новичок в AngularJS и Javascript в целом и пытаюсь расширить свой набор навыков.

Ответ 1

Проблема заключается в том, что

$scope.currentRuimte = Ruimte.get({
    ruimteNaam: $routeParams.ruimteNaam
});

Является асинхронной операцией. $scope.currentRuimte будет пустым объектом, когда этот вызов вернется, а некоторое время спустя, когда данные будут доступны, он будет заполнен HTTP-ответом.

Это означает, что при первом просмотре вашего представления $scope.currentRuimte будет {}, и поэтому $scope.currentRuimte.beamer будет undefined, поэтому эта строка:

var beamer = $scope.currentRuimte.beamer;
if(beamer.aanwezig == 'Ja'){ /* <-- undefined.aanwezig ! */
}

собирается создать исключение. Вы можете решить эту проблему, убедившись, что beamer правдиво:

$scope.getBeamerString = function () {
    var beamer = $scope.currentRuimte.beamer;
    if(beamer && beamer.aanwezig == 'Ja'){
        return beamer.typeBeamer + ' (lamp: ' + beamer.datumLamp + ')';
    }else{
        return '-';
    }
}