Блог

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

https://www.reddit.com/r/Angular2/comments/iqs3xn/list_doesnt_load_until_i_tap_screen_ios/?utm_source=shareamp;utm_medium=web2xamp;context=3

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

Вот домашний компонент:

 import { Component, OnInit, OnDestroy } from '@angular/core';
import { CardService } from '../services/card.service';
import { Observable, combineLatest, Subject, } from 'rxjs';
import { DeckService } from '../services/deck.service';
import { RecentDeck } from '../core/models/recent-deck.model';
import { TrendingCard } from '../core/models/trending-card.model';
import { takeUntil } from 'rxjs/operators';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit, OnDestroy {
  protected ngUnsubscribe: Subject<void> = new Subject<void>();
  
  trendingCards: any;
  trendingLeaders:  any;
  recentDecks: any;

  constructor(
    private route: ActivatedRoute
  ) { } 

  ngOnInit() {
    this.trendingCards = this.route.snapshot.data['trendingCards'];
    this.recentDecks = this.route.snapshot.data['recentDecks'];
    this.trendingLeaders = this.route.snapshot.data['trendingLeaders'];
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}
  

Вот HTML для компонента home:

 <main class='container-fluid'>
    <div class='row mt-3'>
        <section class='col col-md-4' *ngIf="recentDecks; else loading">
            <app-recent-decks [recentDecks]="recentDecks.decks"></app-recent-decks>
        </section>
        <section class='col col-md-4' *ngIf="trendingLeaders; else loadingLeaders">
            <app-trending-leaders [trendingLeaders]="trendingLeaders" ></app-trending-leaders>
        </section>
        <section class='col col-md-4'  *ngIf="trendingCards; else loadingCards">
            <app-trending-cards [trendingCards]="trendingCards"></app-trending-cards>
        </section>
    </div>
</main>
<ng-template #loading>
    <section class='col col-md-4'>
        <app-loading title="Recent Decks"></app-loading>
    </section>
</ng-template>
<ng-template #loadingLeaders>
    <section class='col col-md-4'>
        <app-loading title="Trending Leaders"></app-loading>
    </section>
</ng-template>
<ng-template #loadingCards>
    <section class='col col-md-4'>
        <app-loading title="Trending Cards"></app-loading>
    </section>
</ng-template>
  

Компонент, который обеспечивает все проблемы, является app-recent-decks . Вот код и для этого компонента:

recent-decks.component.ts

 import { Component, OnInit, Input } from '@angular/core';
import { RecentDeck } from '../../../../core/models/recent-deck.model';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-recent-decks',
  templateUrl: './recent-decks.component.html',
  styleUrls: ['./recent-decks.component.scss']
})
export class RecentDecksComponent implements OnInit {
  @Input() recentDecks: Array<any>;

  constructor() { }

  ngOnInit() { }

}
  

recent-decks.component.html

 <div class='card trending-list'>
    <div class='card-header'>
        <h3>Community Decks</h3>
    </div>
    <div class='card-body p-0'>
        <ul class='list-group' *ngIf="recentDecks">
            <a [routerLink]="['/deck/view', d.id]" class='list-group-item list-group-item-action py-0' *ngFor="let d of recentDecks;">
                <div class="float-left w-100 trending-list-info">
                    <div class='leader-stats ellipsis'><strong>{{d.title}}</strong>
                    <br><small>Posted By: {{d.username}} on {{d.submitDate | date}}</small></div>
                </div>
                <img src="{{d.leader.imageUrl[0]}}"/>
            </a>
        </ul>
    </div>
</div>
  

Мой главный вопрос заключается в том, что вызывает такое поведение, и что я могу сделать, чтобы предотвратить это в будущем?

ПРИМЕЧАНИЯ: Для отладки не выводится ошибка, которая была бы удобочитаемой или полезной.