0

我得到了以下来自 EventSource 接口的数据。我正在使用这些数据使用 Angular ng-repeat 构建一个简单的表（我已经指定了下面的表结构）。我遇到的问题是因为数据变化很快，即服务器会不断地为请求的符号发送更改，然后它会继续更新值。我想在为符号请求数据时添加一行，然后应该为新值更新同一行。这很容易并且正在工作。

但真正的挑战是（至少对我来说）当我请求另一个符号时，我希望将其添加到新的第二行，从现在开始它应该更新两行中的值。当我们请求新符号时，它会继续。使用以下数据结构是可能的，如果可以，请解释。

数据结构：

data = [
  AMZN: {
    name: Amazon,
    symbol: AMZN,
    openPrice: $100,
    latestPrice: $200,
    percentage: 0.1
 },
 FB: {
    name: Facebook,
    symbol: FB,
    openPrice: $150,
    latestPrice: $250,
    percentage: 0.2
 }
]

表结构：

<table>
        <thead>
            <tr>
                <th>Session ID</th>
                <th>Company Name</th>
                <th>Symbol</th>
                <th>Open Price</th>
                <th>Latest Price</th>
                <th>Percentage</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="stockVal in data">
                <td>[Empty]</td>
                <td>{{stockVal.companyName}}</td>
                <td>{{stockVal.companySymbol}}</td>
                <td>{{stockVal.openPrice}}</td>
                <td>{{stockVal.latestPrice}}</td>
                <td>{{stockVal.percentage}}</td>
            </tr>
        </tbody>
    </table>

现在发生的情况是，当我请求 AMZN 时，表格会填充与亚马逊有关的值，然后如果我请求 FB，它会替换同一行中的值……即 FB 和 AMZN 都会在同一行中替换。底线是我希望将 FB 值填充到新行中。

控制器代码：

它所做的只是使用 window.EventSource 请求端点并获取数据并将其附加到范围对象。为了避免填充 n 行，每次都会刷新数据数组，例如将长度设为 0。

在下面添加控制器代码，

$scope.generateData = _generateData;

function generateData() {

endPoint = '/getData'
$scope.symbols = window.document.getElementById('symbols').value;
var eventSource = new window.EventSource(endPoint + '?&s=' + $scope.symbols); 

eventSource.onmessage = function(e) {

    var data = null;
    try {
       data =  JSON.parse(e.data);
    } catch (err){

    }

    if(data) {

      $scope.$apply(function () {
        $scope.companyName = data.name;
        $scope.companySymbol = data.symbol;
        $scope.openPrice = data.openPrice;
        $scope.latestPrice = data.latestPrice;
        $scope.percentage = data.percentage;
      });

      var specData = {
        [$scope.companySymbol]: {
          name: $scope.companyName,
          symbol: $scope.companySymbol,
          openPrice: $scope.openPrice,
          latestPrice: $scope.latestPrice,
          percentage: $scope.percentage
        }
      }

      $scope.data[0] = specData[$scope.companySymbol];

    }

 }

};
4

0 回答 0