Update ion-list from subscribe not update data

@joao-correia wrote:

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”>

<ng-container *ngIf=“newsFeatured.length == 0;”>
<ion-img [src]=“spinnerRotate” style=“margin-top: 60%;” class=“spinnerRotation center”>

<ng-container *ngIf=“newsFeatured.length > 0;”>

<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”>

{{ newl.title | titlecase }}

{{ newl.creation_date | titlecase }}

<ion-img *ngIf=“newsLength == 0” [src]=“spinnerRotate” style=“margin-top: 60%;” class=“spinnerRotation center”>
<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”>

{{ newf.title | titlecase }}

{{ newf.creation_date | titlecase }}

Thanks in advance

Posts: 1

Participants: 1

Read full topic