Repository navigation
Carousel some times display no itens #418
Description
So, Im creating a carousel with data from the backend, I populate its array in the constructor function: this is my component.ts:
export class HomeComponent implements OnInit {
rodeos = [];
@ViewChild('carousel') carouselElement;
showInitialized = false;
actions = new EventEmitter<string>();
constructor(private elementRef: ElementRef,
private authService: AuthService,
private rodeoService: RodeosService) {
}
ngOnInit() {
this.rodeoService.getRodeoList().subscribe(
data=>{
this.rodeos = data;
}
)
}
isLoggedIn(){
return this.authService.isLoggedIn();
}
}
My html is like this:
<div #carousel class="carousel" [ngClass]="{ 'initialized': showInitialized }" materialize="carousel">
<div *ngFor="let rodeo of rodeos" class="carousel-item">
<!--<div class=''>-->
<div class="rodeio-card">
<div class="card">
<div class="card-image">
<!--Id do rodeio-->
<a [routerLink]="['/rodeio/1/info']"><img src="../../../assets/images/banner.png" class="img-responsive"></a>
</div>
<div class="card-content">
<h5><b></b></h5>
<div class="row">
<div class="col s6">
<div class="infos">
<img src="../../../assets/images/icon_calendario.png" class="img-responsive">
<h4>Data de Início</h4>
<h5><b>20/10/2018</b></h5>
</div>
<div class="infos">
<img src="../../../assets/images/ico-location.png" class="img-responsive">
<h4>Local</h4>
<h5><b>Viamao</b></h5>
</div>
</div>
<div class="col s6">
<div class="infos">
<img src="../../../assets/images/icon_calendario.png" class="img-responsive">
<h4>Data de Encerramento</h4>
<h5><b>22/10/2018</b></h5>
</div>
<div class="infos">
<a class="waves-effect waves-light btn btn-inscricao">Inscrição</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--</div>-->
</div>
</div>
Some times when I reload the page it loads with the property display: none and no transform property, and so nothing appears:
And when it appears its like that:
This happens in all browsers, some times the cards show, other times it doesn't.
Activity
brunork26 commentedon Jun 20, 2018
I end up with something like this:
But still not the best solution. Setting TimeOut too 2000 sometimes didn't load the data from the api, setting to 5000 takes too long but its working.