Update ion-list from subscribe not update data

Ionic Framework
1

Hi. I’m a newbie on Ionic and Angular, i’m struggling try to show content in ion-list after syncronize from an API.
The first nothing appears but if i refresh the browser the data appears as it should do. Can someone explain me the reason why this happens?

Code:

news.service.ts

> import { Injectable } from '@angular/core';
> import { Dexie } from 'dexie';
> import { DexieService } from './dexie.service';
> import { Observable, from } from 'rxjs';
> 
> export interface News {
>   id: number;
>   creation_date: string;
>   thumbnail: string;
>   thumbnail_type: string;
>   title: string;
>   subtitle: string;
>   corpus: string;
>   visibility: string;
>   active: string;
> }
> 
> @Injectable()
> export class NewsService {
>   newsTable: Dexie.Table<News, number>;
> 
>   constructor(private dexieService: DexieService) {
>     this.newsTable = this.dexieService.table('news');
>   }
> 
>   getAllNews(): Observable<News[]> {
>     return from(this.newsTable.where('active').equals('1').reverse().sortBy('creation_date'));
>   }
> 
>   getAllFeaturedNews(): Observable<News[]> {
>     return from(this.newsTable.where('[featured+active]').equals(["1", "1"]).reverse().sortBy('creation_date'));
>   }
> 
>   getNewContent(newId: number): Promise<News[]> {
>     return this.newsTable.where('[id+active]').equals([newId, "1"]).toArray();
>   }
> }

main.page.ts:

import { Component, ViewChild, OnInit, ChangeDetectorRef } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { IonSlides } from '@ionic/angular';

import { StructureService, Structure } from '../../services/structure.service';
import { NewsService, News } from '../../services/news.service';

import {
  Plugins } from '@capacitor/core';

const { App } = Plugins;

@Component({
  selector: 'app-main',
  templateUrl: './main.page.html',
  styleUrls: ['./main.page.scss']
})
export class MainPage implements OnInit {
  @ViewChild('slides', { static: false }) slider: IonSlides;

  public news: News[];
  public newsLength = 0;
  public newsFeatured: News[];
  public newsFeaturedLength = 0;

  constructor(
    private newsService: NewsService,
    private ref: ChangeDetectorRef
  ) {
    this.news = [];
    this.newsFeatured = [];
    this.getNews();
  }

  getNews(){
    this.newsService.getAllNews().subscribe(data => {
      this.news = data;
      this.newsLength = this.news.length;
      console.log(this.news);
      this.ref.detectChanges();
    },
    error => {
      // what you want to do with the error
      console.log(error);
    });

    this.newsService.getAllFeaturedNews().subscribe(data => {
      this.newsFeatured = data;
      this.newsFeaturedLength = this.newsFeatured.length;
      console.log(this.newsFeatured);
      //console.log(this.newsFeatured.length);
      this.ref.detectChanges();
    },
    error => {
      // what you want to do with the error
      console.log(error);
    });
  }
}

main.page.html:

<ion-slides #slides (ionSlideDidChange)="slideChanged()" [options]="sliderOptions">
        <ion-slide>
            <ng-container *ngIf="newsFeatured.length == 0;">
                <ion-img [src]="spinnerRotate" style="margin-top: 60%;" class="spinnerRotation center"></ion-img>
            </ng-container>
            <ng-container *ngIf="newsFeatured.length > 0;">
                <ion-list>
                    <ng-container *ngFor="let newl of newsFeatured">
                        <ion-card *ngIf="(newl.visibility == 'public' || (newl.visibility == 'private' && logged))" (click)="getNew(newl.id, 1)" [ngStyle]="{'background-image': 'url(data:' + newl.thumbnail_type + ';base64,' + newl.thumbnail + ')', 'background-size':'cover'}"
                            class="card-image">
                            <ion-card-content style="background-color: rgba(238, 238, 238, 0.8); padding:10px;bottom: 0;">
                                <div class="ion-text-start">
                                    <h3 style="color:#ad8810;"><b>{{ newl.title | titlecase }}</b></h3>
                                    <h6 style="color:#ad8810;">{{ newl.creation_date | titlecase }}</h6>
                                </div>
                            </ion-card-content>
                        </ion-card>
                    </ng-container>
                </ion-list>
            </ng-container>
        </ion-slide>
        <ion-slide>
            <ion-img *ngIf="newsLength == 0" [src]="spinnerRotate" style="margin-top: 60%;" class="spinnerRotation center"></ion-img>
            <ion-list *ngIf="newsLength > 0">
                <ng-container *ngFor="let newf of news;">
                    <ion-card *ngIf="(newf.visibility == 'public' || (newf.visibility == 'private' && logged))" (click)="getNew(newf.id, 0)" [ngStyle]="{'background-image': 'url(data:' + newf.thumbnail_type + ';base64,' + newf.thumbnail + ')', 'background-size':'cover'}"
                        class="card-image">
                        <ion-card-content style="background-color: rgba(238, 238, 238, 0.8); padding:10px;bottom: 0;">
                            <div class="ion-text-start">
                                <h3 style="color:#ad8810;"><b>{{ newf.title | titlecase }}</b></h3>
                                <h6 style="color:#ad8810;">{{ newf.creation_date | titlecase }}</h6>
                            </div>
                        </ion-card-content>
                    </ion-card>
                </ng-container>
            </ion-list>
        </ion-slide>
    </ion-slides>

Thanks in advance

2

Why dont you put this in a demo repository so that we can clone it and test it out locally.

3

Thanks for the reply. Unfortunately i cant put the code public. But i already solved the problem.
I put an Interval on the Observable to run every 1000 ms, until it’s get the data, after that i unsubscribe from the Observable.

Code:

this.newsObservable = interval(1000).subscribe(()=>{
this.getNews(); //where it update newsFeatured array
if (this.newsFeatured.length > 0) {
this.newsObservable.unsubscribe();
}
});

4

After a more research about the problem. The real problem was that my code wasnt waiting for the database populate the data for the first time.
This issue helped with my problem.

I hope that helps someone.