Question

Framwwork：Ionic＆amp; Angualr-JS

我在屏幕上有两个搜索文本框，如附图所示。当填充两个文本框的值时，它搜索结果并填充数组以在ion-list上显示。

我面临的问题是数组已填充，但它没有更新视图。当我点击或点击屏幕时，它会显示带有预期结果的离子列表，如附带的屏幕截图所示。

其他几个屏幕也发生了同样的事情。我的离子html页面变得复杂，因为我使用相同的html页面来显示其他页面的其他组件。

有很多ng-show＆amp; ng-if条件。

html代码

<!-- Source search text-box -->
<ion-header-bar class="bar-subheader item-input-inset">
    <label class="item-input-wrapper">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="Choose starting point..." ng-change="searchSourceStation()" ng-model="data.sourceStation">
    </label>
    <button class="button button-clear" ng-click="clearSource();">Cancel</button>
</ion-header-bar>
<!-- destination search text-box -->
<ion-header-bar class="bar-subheader item-input-inset">
    <label class="item-input-wrapper">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="Choose destination..." ng-change="searchDestinationStation()" ng-model="data.destinationStation">
    </label>
    <button class="button button-clear" ng-click="clearDestination();">Cancel</button>
</ion-header-bar>
<ion-content class="has-subheader"> 
    <ion-list class="list has-header"> 
        <!--  to display bus/train list on key press of source and dest textbox -->
        <ion-item class="item" ng-repeat="station in data.stations" type="item-text-wrap" ng-click="setSourceOrDestination(station.stationName);"> 
            <p>{{station.stationName}}</p>
        </ion-item>
    </ion-list> 

    <div ng-show="showScroll" style="background-color: lightblue;">
        <ion-infinite-scroll on-infinite="loadMore()" distance="10%" ng-if="!noData"></ion-infinite-scroll>
    </div>

    <!--  To Display History of past Search -->     
    <ion-list class="list has-header" ng-if="showHistory"> 
        <ion-item class="item item-icon-left item-icon-right" ng-repeat="trainHistory in history track by $index" ng-click="setSourceAndDestination('{{trainHistory.trainHistory.sourceStation}}','{{trainHistory.trainHistory.destinationStation}}')" > 
            <i class="icon ion-ios-clock-outline" style="font-size: 30px"></i>
            <p>{{trainHistory.trainHistory.sourceStation }} to {{trainHistory.trainHistory.destinationStation }} </p>
            <i class="icon ion-arrow-graph-up-left" style="font-size: 30px" ng-click="filterTrains"></i>
        </ion-item>
    </ion-list> 
    <ion-list class="list has-header" ng-if="message">
          <ion-item class="item-stable">
                <div class="form-error" style="text-align: center;font-size: 14px;">{{message}}</div>
          </ion-item>
    </ion-list>
    <!-- Search result ion-list -->
    <ion-list class="list has-header" ng-if="transport.code != 'BUS'">

        <!-- this won't get displayed for the attached screenshot -->
        <ion-item class="item item-divider item-icon-right" ng-if="showFilter">
            <p>Total Trains {{filteredTrain.length}}</p>
            <input type="hidden" ng-model="slowFastFlag" />
            <a class="icon ion-more" ng-click="popover.show($event)"></a>
            <input type="hidden" ng-model="filterText" />
        </ion-item>

        <div ng-repeat="train in filteredTrain = (data.trains | filter: slowFastFlag)">
          <!-- this won't get displayed for the attached screenshot -->
          <ion-item class="item-stable" ng-click="toggleGroup(train);" ng-class="{active: isGroupShown(train)}">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td ng-if="train.trainName != null"><h3>{{train.trainName}}</h3></td>
                            <td style="font-size: 12px;" align="right" ng-if="train.sourceStationArrivalTime"><i class="icon ion-clock"></i>{{" " + train.sourceStationArrivalTime | limitTo: 6 }}</td>
                        </tr>
                        <tr>
                            <td ng-if="train.arrivingIn != null"><p><i class="icon ion-ios-stopwatch"></i><font color="green"> In {{train.arrivingIn }}</font></p></h2></td>
                            <td style="font-size: 12px;" align="right" ng-if="train.destinationStationArrivalTime != null"><i class="icon ion-clock"></i>{{" " + train.destinationStationArrivalTime | limitTo: 6 }}</td>
                        </tr>
                    </table>
          </ion-item>
          <!-- This is search result. -->
          <ion-item class="item-accordion" ng-repeat="station in train.stations" ng-show="isGroupShown(train)" ng-click="toggleGroup(train);">
                <table border="1" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td align="left" style="font-size: 28px;width: 30px;" ng-if="station.lineColour != null">
                                <i class="ion-android-subway yellow" ng-if="station.lineColour == 'YELLOW'"></i>
                                <i class="ion-android-subway red" ng-if="station.lineColour == 'RED'"></i>
                                <i class="ion-android-subway green" ng-if="station.lineColour == 'GREEN'"></i>
                                <i class="ion-android-subway blue" ng-if="station.lineColour == 'BLUE'"></i>
                                <i class="ion-android-subway skyBlue" ng-if="station.lineColour == 'SKY_BLUE'"></i>
                                <i class="ion-android-subway orange" ng-if="station.lineColour == 'ORANGE'"></i>
                            </td>
                            <td align="left" valign="middle" style="vertical-align: middle;">
                                <h3>{{station.stationName}}</h3>
                            </td>
                            <td style="font-size: 12px;" align="right" ng-if="station.arrivalTime != null">
                                <i class="icon ion-clock"></i>{{" " + station.arrivalTime | limitTo: 6 }}
                            </td>
                        </tr>
                    </table>
          </ion-item>
        </div>
  </ion-list>

当用户在两个文本框中输入值

时，

Angular-js函数调用

$scope.findUpcomingTrains = function() {
    console.log("findUpcomingTrains");
    $scope.profile = JSON.parse($window.localStorage['profile']);
    var promise = TrainService.findUpcomingTrains($scope.transport.code, $scope.data.sourceStation, $scope.data.destinationStation, $scope.profile.city);
    promise.then(function(resp) {
        $scope.data.trains = resp.data.trains;
        if ($scope.transport.code == 'LOCAL') {
            $scope.showFilter = true;
        }
        $scope.showHistory = false;

        if ($scope.data.sourceStation != $scope.data.destinationStation) {
            if ($scope.transport.code == 'MONO') {
                $scope.addToMonoHistory($scope.data.sourceStation, $scope.data.destinationStation, $scope.profile.city);
            }

            if ($scope.transport.code == 'METRO') {
                $scope.addToMetroHistory($scope.data.sourceStation, $scope.data.destinationStation, $scope.profile.city);
            }
            if ($scope.transport.code == 'LOCAL') {
                $scope.addToLocalHistory($scope.data.sourceStation, $scope.data.destinationStation, $scope.profile.city);
            }
        }


        if (resp.data.message) {
            $scope.message = resp.data.message;
        } else {

        }
    }, function(resp) {
        console.log("ERROR : " + resp);
    })
    console.log("findUpcomingTrains : $scope.$apploy() called")
}

还有一个观察结果是这个问题只发生在用户使用ion-infinite-scroll时，这意味着尝试向下滚动并调用无限滚动的loadMore（）函数。

下面是我的loadMore函数

$scope.loadMore = function() {
      $scope.dataToLoad = 15;
      console.log("******* loadmore() ******* : No Data : " + $scope.noData);

      if (angular.isUndefined($scope.data.stations)) {
          console.log("$scope.data.stations is undefined...");
          $scope.noData = false;
          $scope.$broadcast('scroll.infiniteScrollComplete');
          return;
      }
      console.log("loadMore : $scope.data.filteredStations : " + $scope.data.stations.length + " , $scope.dataToLoad " + $scope.dataToLoad);
      $scope.data.stations = $scope.data.filteredStations.slice(0, ($scope.data.stations.length + $scope.dataToLoad));

      if ($scope.data.stations.length == $scope.data.filteredStations.length) {
          $scope.noData = true;
      } else {
          $scope.noData = false;
      }
      $scope.$broadcast('scroll.infiniteScrollComplete');
  }

Answer 1

我也有这个问题。其中一个Angular 2版本中有一个错误导致了这个问题。假设这是相关的，解决方法是使用ngZone：

zone.run(() => {
    // do stuff here...
});

但是自从框架更新后，就不再需要了。

没有点击/点击，离子离子列表不显示结果

1 个答案: