Angular Swiper показывает только один слайд изначально перед загрузкой других ⇐ Html

[Anonymous]

import { Component } from '@angular/core';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { TmdbService } from '../../services/tmdb.service';
import { OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Subject, takeUntil } from 'rxjs';
import { ITrending } from '../../interfaces/trending';
import Swiper from 'swiper';
import { RouterLink } from '@angular/router';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { swiperInitialization } from '../../swiper/swiperConfig';
import { ShowCardScoreComponent } from '../show-card-score/show-card-score.component';

@Component({
selector: 'app-trending',
imports: [
MatButtonToggleModule,
ShowCardScoreComponent,
CommonModule,
FormsModule,
RouterLink,
NgxSkeletonLoaderModule,
],
templateUrl: './trending.component.html',
styleUrl: './trending.component.css',
})
export class TrendingComponent implements OnInit, OnDestroy {
loading: boolean = false;
timeSelectedValue: string = 'day';
trendingShows: Array = [];
swiper: Swiper | null = null;

$unsubscribe: Subject = new Subject();

constructor(private tmdbService: TmdbService) {}

ngOnInit(): void {
this.getTrendingData(this.timeSelectedValue);
}

ngOnDestroy(): void {
this.$unsubscribe.next();
this.$unsubscribe.complete();
if (this.swiper) {
this.swiper.destroy(true, true);
}
}

// This method is triggered when the selection changes
onSelectionChange(event: any) {
this.timeSelectedValue = event.value;
this.getTrendingData(this.timeSelectedValue);
}

getTrendingData(timeSelectedValue: string) {
this.trendingShows = [];
this.loading = true;
if (this.swiper) {
this.swiper.destroy(true, true); // Destroy the current Swiper instance
}
this.swiper = swiperInitialization('#swiperTrending', {
300: { slidesPerView: 1 },
500: { slidesPerView: 2 },
900: { slidesPerView: 4 },
1200: { slidesPerView: 5 },
1400: { slidesPerView: 6 },
1800: { slidesPerView: 8 },
});

this.tmdbService
.getTrendingAll(timeSelectedValue)
.pipe(takeUntil(this.$unsubscribe))
.subscribe((data) => {
console.log(data);
// Process data here
data.results.map((show: any) => {
if (show.name !== undefined) show['title'] = show.name;
this.trendingShows.push(show);
});
this.loading = false;
});
}
}< /code>




Trending


Today
This Week
























@for(show of trendingShows;track show.id;let index=$index){



}


< /code>
< /div>
< /div>
< /p>
Я использую Angular с swiper.js, чтобы отобразить список трендов показывает, что извлекается из API TMDB. Однако, когда компонент загружается, сначала появляется только один слайд, а затем через короткий момент все слайды загружаются. Я хочу, чтобы все слайды появились сразу после извлечения данных. < /P>
i попробовали это, но ни один из них не сработал: < /p>
-initializing Swiper после получения данных. ДАННЫЕ. P> FIRs показывает нормальный скелет до того, как данные будут извлечены

Когда данные избираются, мигает это на первом

А затем это


Подробнее здесь: https://stackoverflow.com/questions/794 ... ing-others