AngularJS插值误差

Question

我正在显示房间的属性作为我正在处理的房间管理应用程序的一部分,这是输出:

正如你所看到的,Beamer(投影仪的英文版)的价值是"Sony(lamp 01/12/2013)".这个输出是正确的但是当我打开我的控制台时,我看到一些关于插值的错误:

分辨率更高:

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

这是我的html部分:

<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 in English)是一个范围定义变量,它使用从我的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很新,并尝试扩展我的技能组合.

Answer 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 '-';
    }
}