AngularJS插值误差

问题描述

我展示一个房间的属性，我工作的房间管理应用程序的一部分，这是输出：

I am displaying the properties of a room as part of a room management application I am working on, this is the output:

正如你所看到的，（投影机英文）比默的值是索尼（灯2013年1月12日）。这个输出是正确的，但是当我打开我的控制台我看到有关插值的一些错误：

As you can see, the value of Beamer (Projector in english) is "Sony (lamp 01/12/2013)". This output is correct but when I open my console I see some errors concerning interpolation:

放大分辨率：

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

这是我的HTML部分：

This is my 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的数据资源服务获取它的值范围定义的变量：

currentRuimte (CurrentRoom in English) is a scope defined variable that gets its value using a resource service that gets that data from my 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检查范围，我得到这样的：

When I inspect the scope using batarang I get this:

为什么我得到的错误，为什么我仍然得到正确的输出？
有没有一种方法，以prevent从发生的错误？请纠正我，你一样可以，
我是相当新的AngularJS和Javascript一般，并试图扩大我的技能。

Why do I get the error and why do I still get the correct output?Is there a way to prevent the error from happening? Please correct me as much as you can,I am fairly new to AngularJS and Javascript in general and trying to expand my skillset.

推荐答案

的问题是，

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

是一个异步操作。 $ scope.currentRuimte 将是在此调用返回，并在一段时间后，当数据可用时，将使用HTTP响应填补了一个空白的对象。

Is an asynchronous operation. $scope.currentRuimte is going to be a blank object when this call returns, and some time later, when the data is available, it will be filled in with the HTTP response.

这意味着你的看法被渲染的第一次， $ scope.currentRuimte 将是 {} ，因而 $ scope.currentRuimte.beamer 将是未定义，所以这行：

This means that the first time your view is rendered, $scope.currentRuimte is going to be {}, and therefore $scope.currentRuimte.beamer is going to be undefined, so this line:

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

将要引发异常。您可以通过确保解决这一点，投影仪是truthy第一：

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

这篇关于AngularJS插值误差的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！