İyonik iyon listesi/musluk olmadan sonucu görüntülemek

Question

Framwwork tıklamazsa: İyon & Angualr-JS

ekli resimde görüntülenen gibi ekranda iki arama metin kutusu var. Her iki metin kutusunun değeri doldurulduğunda, sonuç arar ve iyon listesinde görüntülemek için diziyi doldurur.

Karşılaştığım sorun dizinin doldurulduğu ancak görünümün güncellenmediği. Ekrana dokunduğumda veya tıkladığımda, ekli ekran görüntüsünde gösterildiği gibi beklenen sonuçları içeren iyon listesini görüntüler.

Aynı şey birkaç ekran için de oluyor. Diğer sayfalar için diğer bileşenleri görüntülemek üzere aynı html sayfasını kullandığından, iyonik html sayfam karmaşık hale geldi.

Koşullar ng-show & ng-vardır.

kullanıcı

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

bir daha gözlem olmasıdır metin kutularında değeri girer

HTML kodu

<!-- 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> 

Açısal-js işlev çağrısı Bu sorun yalnızca kullanıcı iyon-sonsuz kaydırma kullanır, yani aşağı kaydırmaya çalışır ve sonsuz kaydırmanın loadMore() işlevini çağırır.

Aşağıda ben de bu sorunu vardı benim loadMore fonksiyonu

$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

olduğunu. Buna neden olan Angular 2 sürümlerinden birinde bir hata vardı. ilgili bu varsayarsak, geçici çözüm ngZone kullanmaktı:

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

Ama çerçeve güncellendikten sonra, o artık gerekli olmalıdır

.