Ionic 4 - Автопрокрутка до определенного раздела на основе даты, когда пользователь открывает страницу

Question

У меня есть страница, которая отображает список элементов ионной карты с информацией, прочитанной из огня. Каждый элемент будет отображать информацию о спортивном приспособлении, включая дату.

Некоторые из этих приборов будут в прошлом, а некоторые - в будущем, но когда пользователь откроет страницу, я хочу, чтобы страница автоматически открывалась с отображением ионной карты, дата которой ближе всего к сегодняшней дате. Я надеюсь, что это имеет смысл - я понятия не имею, как это сделать!

 <ion-content>

      <ion-card *ngFor="let match of matches"  tappable 
 routerLink="/../match-details-standard/{{match.id}}">

         <ion-card-content>    
             <ion-grid >
                 <ion-row>
                     <ion-col></ion-col>
                     <ion-col></ion-col>
                     <ion-col class="team" col-3>{{match?.team}}</ion-col>
                     <ion-col></ion-col>
                     <ion-col></ion-col>
                  </ion-row>

                 <!-- matchNotPlayed: If the match has been played then I 
 don't want to show the day which it was played -->
                 <ion-row *ngIf="match?.homeScore != ''; else 
 matchNotPlayed">
                     <ion-col></ion-col>
                     <ion-col></ion-col>
                     <ion-col col-3>{{match?.date.seconds * 1000 | date:'d 
 MMM yy' }}</ion-col>
                     <ion-col></ion-col>
                     <ion-col></ion-col>
                 </ion-row>
                 <ng-template #matchNotPlayed>
                     <ion-row> {{match?.date.seconds * 1000 | date:'EE d 
 MMM yy' }}</ion-row>
                 </ng-template> 
                 <!-- matchNotPlayed: End -->

                 <!-- noScoreReceived: If the match has been played and 
 scores updated then display scores else show 'v' between team names-->
                 <ion-row *ngIf="match?.homeScore != ''; else 
  noScoreReceived" border="solid">
                      <ion-col col-2>{{match?.home}}</ion-col>
                     <ion-col col-1 style="text-align: right"> 
 {{match?.homeScore}}</ion-col> 
                     <ion-col col-1> - </ion-col> 
                     <ion-col col-1 style="text-align: left"> 
 {{match?.awayScore}}</ion-col>
                     <ion-col col-2> {{match?.away}}</ion-col>
                  </ion-row>
                 <ng-template #noScoreReceived>
                     <ion-row>
                         <ion-col col-2>{{match?.home}}</ion-col> 
                         <ion-col col-1></ion-col>
                         <ion-col col-1> v </ion-col>
                         <ion-col col-1></ion-col>
                         <ion-col col-2> {{match?.away}}</ion-col>
                      </ion-row>
                  </ng-template> 
                 <!-- noScoreReceived -->

                 <ion-row> {{match?.date.seconds * 1000 | date:'h:mm a' }} 
 </ion-row>
              </ion-grid>    
          </ion-card-content>
     </ion-card>

  </ion-content>

Answer 1

Вы должны будете выяснить, в какой позиции (y координировать) эта ионная карта с самой новой датой.Вы можете сделать это в зависимости от положения этой карты в вашем массиве и от того, какой будет один элемент при ее отображении.С этой информацией вы можете автоматически прокрутить до определенной точки с помощью scrollToPoint

Для получения дополнительной информации см. https://ionicframework.com/docs/api/content#scrollToPoint

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollToTop() {
    var x, y
    // Calculate y
    this.content.scrollToPoint(x,y);
  }
}