AngularJS插值误差

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

你可以看到，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一般都很新，并试图扩大我的技能。

问题在于

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

是异步操作。 $ scope.currentRuimte将在此调用返回时成为空白对象，稍后一段时间，当数据可用时，它将被HTTP响应填充。

这意味着您第一次渲染视图时，$ scope.currentRuimte将成为{}，因此$ scope.currentRuimte.beamer将不会被定义，所以这一行：

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

将会引起例外。您可以通过确保投标者真实地解决这个问题：

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

AngularJS插值误差

猜你在找的Angularjs相关文章