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）是一个范围定义的变量，它使用从我的 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 '-';
    }
}