Ionic 应用程序数据中的 Firebase 3、AngularFire 2 未实时更新/实时更新(带视频演示)

本文介绍了Ionic 应用程序数据中的 Firebase 3、AngularFire 2 未实时更新/实时更新(带视频演示)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

Firebase 以其实时数据更新而闻名，所以这对我来说很奇怪.

我正在使用 Firebase 3(新​​的 firebase 控制台应用程序.想稍后添加身份验证)和 AngularFire 2.我使用 Ionic 的选项卡模板启动应用程序，因此 app.js 的路由器配置应该是相同的.

有时，一个视图会加载数据，而另一个视图直到切换选项卡或单击该视图的添加属性"按钮后才会加载数据.我将应用上传到 ionic.io 以使用 ionic 视图在我的手机上试用，我得到了与数据库更新相同的结果，但直到触发更改后视图才会更新.

HTML(包含切换):

<ion-content class="padding"><button class="button button-block button-positive" ng-click="addProperty()">添加测试属性</button><div class="list" ng-repeat="(key, property) in properties"><ion-toggle class="item item-divider" ng-model="property.status" ng-true-value="'on'"ng-false-value="'off'" ng-change="togglePower(property, key)">{{ property.name }}</ion-toggle>
</离子含量></ion-view>

索引.html

<script src="lib/ionic/js/ionic.bundle.js"></script><!--cordova 脚本(在开发过程中这将是 404)--><script src="cordova.js"></script><!-- Firebase &AngularFire -->//我尝试保存它们并从本地加载<script src="https://www.gstatic/firebasejs/3.2.0/firebase.js"></script><script src="https://cdn.firebase/libs/angularfire/2.0.1/angularfire.min.js"></script><脚本>//初始化 Firebase变量配置 = {apiKey: "API_KEY",authDomain: "projectName.firebaseapp",databaseURL: "https://projectNamefirebaseio",存储桶:projectName.appspot"};firebase.initializeApp(config);<!-- 您应用的 js --><script src="js/app.js"></script><script src="js/controllers.js"></script><script src="js/services.js"></script>

Controller.js

controller('DashCtrl', function ($scope) {var propertiesRef = firebase.database().ref('properties');propertiesRef.on('value', function (data) {$scope.properties = data.val();}，函数(错误对象){console.log("获取属性时出错:" + errorObject.code);});变量 ID = 0;$scope.addProperty = 函数 () {属性Ref.push({名称:测试"+ id++，状态:开"}).then(函数(){console.log("属性已添加！");});};$scope.togglePower = 函数(设备，密钥){propertiesRef.child(key).update({状态":设备状态});};};

如果需要任何额外的东西，请告诉我.我无法理解似乎是什么问题.

解决方案

如您所见，当您在 Android 应用中单击切换按钮时，所有切换按钮都会更新.这是因为当您点击时，您会触发digest cicle

您应该在更新范围变量后调用 $scope.$apply()，或者将其包装在超时中

controller('DashCtrl', function ($scope, $timeout) {var propertiesRef = firebase.database().ref('properties');propertiesRef.on('value', function (data) {$超时(功能(){$scope.properties = data.val();})}，函数(错误对象){console.log("获取属性时出错:" + errorObject.code);});};

Firebase is known for its real-time data update, so this is a weird one for me.

I am using Firebase 3 (New firebase console app. Want to add authentication later) and AngularFire 2. I started the app using Ionic's tab template so the app.js' router config should be the same.

Click here to see a (90 second) video demo of the issue

I have my ionic app served to the browser using 'ionic serve --lab' so I can see iOS and Android view.

When I try to toggle data in one view (say iOS), the changes are instatly shown in firebase DB, but does now show immediately in the other view (Android) until I either toggle something, or change tabs in that view.

On the other hand, if I make a change in the firebase DB, then neither of the two views are updated until I either person an action or change tabs for each view.

Few other observations:

Sometimes on load, neither of the view has data loaded from firebase db until tabs are switched or 'Add Property' button is clicked for each view. (Least common) Sometimes, one view has the data loaded, while the other does not until tabs are switched or 'Add Property' button is clicked for that view. I uploaded the app to ionic.io to try it on my phone using ionic view, and I got same results where DB would update, but the views would not until a change was triggered.

HTML (containing toggles):

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <button class="button button-block button-positive" ng-click="addProperty()">Add Test Property</button>
    <div class="list" ng-repeat="(key, property) in properties">
      <ion-toggle class="item item-divider" ng-model="property.status" ng-true-value="'on'"
        ng-false-value="'off'" ng-change="togglePower(property, key)"> {{ property.name }}
      </ion-toggle>
    </div>
  </ion-content>
</ion-view>

Index.html

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- Firebase & AngularFire --> // I tried saving them and loading from locally
<script src="https://www.gstatic/firebasejs/3.2.0/firebase.js"></script>
<script src="https://cdn.firebase/libs/angularfire/2.0.1/angularfire.min.js"></script>

<script>
  // Initialize Firebase
  var config = {
    apiKey: "API_KEY",
    authDomain: "projectName.firebaseapp",
    databaseURL: "https://projectNamefirebaseio",
    storageBucket: "projectName.appspot"
  };
  firebase.initializeApp(config);
</script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>

Controller.js

controller('DashCtrl', function ($scope) {
    var propertiesRef = firebase.database().ref('properties');

    propertiesRef.on('value', function (data) {
      $scope.properties = data.val();
    }, function (errorObject) {
      console.log("Error getting the properties: " + errorObject.code);
    });

    var id = 0;
    $scope.addProperty = function () {
      propertiesRef.push({
        name: "Test " + id++,
        status: "on"
      }).then(function () {
        console.log("Property Added!");
      });
    };

    $scope.togglePower = function (device, key) {
      propertiesRef.child(key).update({
        "status": device.status
      });
    };
};

Let me know if any additional is needed. I am not able to understand what seems to be the issue.

解决方案

As you can see, when you click the toggle in the android app all the toggles gets updated. This is because when you perform a click you trigger the digest cicle

You should call $scope.$apply() after updating your scope variable, or wrapping it in a timeout

controller('DashCtrl', function ($scope, $timeout) {
    var propertiesRef = firebase.database().ref('properties');

    propertiesRef.on('value', function (data) {
      $timeout(function() {
        $scope.properties = data.val();
      })
    }, function (errorObject) {
      console.log("Error getting the properties: " + errorObject.code);
    });
};

这篇关于Ionic 应用程序数据中的 Firebase 3、AngularFire 2 未实时更新/实时更新(带视频演示)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！