Ionic-Ionen-Liste nicht angezeigt Ergebnis ohne Hahn/click

Question

Framwwork: Ionische & Angualr-JS

Ich habe zwei Suchtext-Feld auf dem Bildschirm in dem beigefügten Bild als angezeigt. Wenn der Wert beider Textfelder gefüllt ist, sucht er nach dem Ergebnis und füllt das Array zur Anzeige auf der Ion-Liste auf.

Das Problem, mit dem ich konfrontiert bin, ist das Array ist ausgefüllt, aber es aktualisiert nicht angezeigt. Wenn ich auf den Bildschirm klicke oder auf den Bildschirm klicke, wird die Ion-Liste mit dem erwarteten Ergebnis angezeigt, wie im beigefügten Screenshot gezeigt.

Das gleiche passiert für einige andere Bildschirme. Meine ionische HTML-Seite ist komplex geworden, da ich dieselbe HTML-Seite verwende, um andere Komponenten für andere Seiten anzuzeigen.

Es gibt viele ng-show & ng-wenn Bedingungen.

HTML-Code

<!-- 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 Funktionsaufruf, wenn der Benutzer sowohl die Textkästen

Wert in

$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") 
} 

Eine weitere Beobachtung ist, eingibt, Dieses Problem tritt nur auf, wenn der Der Benutzer verwendet ion-infinite-scroll, was bedeutet, dass versucht wird, nach unten zu scrollen, und es ruft die Funktion loadMore() von infinite scroll auf.

Unten ist mein loadMore Funktion

$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

ich dieses Problem auch hatte. Es gab einen Fehler in einer der Angular 2-Versionen, die dies verursacht haben. Unter der Annahme, dies bezieht, war die Abhilfe ngZone zu verwenden:

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

Aber da der Rahmen aktualisiert wurde, sollte dies nicht mehr notwendig sein.