javascript - 将 Firebase 中的数据填充到我的空数组中

Question

我尝试创建一个“单一客户端” View 。每个客户都有一个 prenom(名字)和一个 nom(姓氏)。实际上，我的应用程序似乎知道客户端有两个值，但这些值没有出现。

我的问题:为什么数据没有出现。

这是我从 URL LOCALHOST/#/clients/-JYvLztvmRIcT8ITKWl1 获得的内容

更新:在此处查看实时代码:http://plnkr.co/edit/0waQY6ny8TvgNZhz4DRW?p=preview

HTML

<p>Client: {{client}}</p>
<p>Clients: {{clients}}</p>
<p>Client.prenom: {{client.prenom}}</p>

生成的 HTML(当我加载页面时)

Client: [{},{}]
Clients:
Client.prenom:

Controller (app.js 代码片段)

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'accueil.html'
      }).
      when('/clients', {
        templateUrl: 'clients.html',
        controller: 'ClientsCtrl'
      }).
      when('/clients/:clientId', {
        templateUrl: 'client.html',
        controller: 'ClientSoloCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

app.controller('ClientSoloCtrl', ClientSoloCtrl);
function ClientSoloCtrl ($scope, $firebase, $routeParams) {

  var clientId = $routeParams.clientId;
  var ref = new Firebase("https://crmfirebase.firebaseio.com/clients/"+clientId);
  $scope.client = $firebase(ref).$asArray();

  $scope.removeClient = function(client) {
    $scope.client.$remove(client);
  };

  $scope.addClient = function (client) {
    $scope.client.$add(client);
  };

  $scope.updateClient = function (client) {
    $scope.client.$save(client);
  };

}

Answer 1

当我访问您的 Plunkr 时，客户端列表会正确填充。该部分由 ClientsCtrl 处理，并按照我期望的方式工作。

当您单击其中一个客户端时，导航将转到 client.html 和 ClientSoloCtrl。你正在做的:

var clientId = $routeParams.clientId;
var ref = new Firebase("https://crmfirebase.firebaseio.com/clients/"+clientId);
$scope.client = $firebase(ref).$asArray();

你的错误在最后一行。您正在尝试将单个对象绑定(bind)到 $scope，而不是数组。因此，您应该在此处使用 $asObject 而不是 $asArray。

var clientId = $routeParams.clientId;
var ref = new Firebase("https://crmfirebase.firebaseio.com/clients/"+clientId);
var client = $firebase(ref).$asObject();
client.$bindTo($scope, 'client');

最后一行使(同步)客户端对象可通过名称 client 供 View 使用，这就是您在 View 的 HTML 中使用的名称:

    <form class="form-inline" ng-submit="updateClient(client)">
        <div class="form-group">
            <input type="text" class="form-control"  placeholder="Prénom" ng-model="client.prenom" />
        </div>
        <div class="form-group">
          <input class="form-control" type="text" placeholder="Nom de famille" ng-model="client.nom" />
        </div>
        <button type="submit">Sauvegarder</button>
    </form>