Angular Service function not recognised

@heruekosusanto wrote:

Hi all,
I have a wordpress services that retrieve posts and post detail like this:

import { Injectable } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;
import { Observable } from ‘rxjs’;
import { map } from ‘rxjs/operators’;

@Injectable({
providedIn: ‘root’
})
export class WordpressService {
url = http://blablabla.com/wp-json/wp/v2/;
totalPosts = null;
pages: any;

constructor(private http: HttpClient) { }

getPosts(page): Observable<any> {
const options = {
observe: ‘response’ as ‘body’,
params: {
per_page: ‘5’,
page: ‘’ + page
}
};

return this.http.get<any[]>(`${this.url}posts?_embed`, options)
  .pipe(
    map(resp => {
      this.pages = resp['headers'].get('x-wp-totalpages');
      this.totalPosts = resp['headers'].get('x-wp-total');

      const data = resp['body'];
      for (const post of data) {
        post.media_url = post['_embedded']['wp:featuredmedia'][0].source_url;
      }
      return data;
    })
  );

}

getPostContent (id: any) {
return this.http.get(${this.url}posts/${id}?_embed).pipe(
map(post => {
post[‘media_url’] = post[’_embedded’][‘wp:featuredmedia’][0].source_url;
return post;
})
);
}
}

and here an page class that consume the service

import { Component, OnInit, ViewChild } from ‘@angular/core’;
import { WordpressService } from ‘src/app/services/wordpress.service’;
import { LoadingController } from ‘@ionic/angular’;
import { IonInfiniteScroll } from ‘@ionic/angular’;

@Component({
selector: ‘app-posts’,
templateUrl: ‘./posts.page.html’,
styleUrls: [’./posts.page.scss’],
})
export class PostsPage implements OnInit {
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
posts = ;
page = 1;
count = null;

constructor(
public wp: WordpressService,
private loadingCtrl: LoadingController
) { }

ngOnInit() {
this.loadPosts();
}

async loadPosts() {
const loading = await this.loadingCtrl.create({
message: ‘Loading data …’
});
await loading.present();

this.wp.getPosts(this.page).subscribe(res => {
  this.wp = this.wp.totalPosts;
  this.posts = res;
  loading.dismiss();
});

}

loadMorePosts() {
this.page++;

this.wp.getPosts(this.page).subscribe(res => {
  this.posts = [...this.posts, ...res];
  //event.target.complete();
});
if (this.page === this.wp.pages) {
  //event.target.disabled = true;
  //this.infiniteScroll.disabled = true;
}

}

loadMore(event: any) {
this.page++;

this.wp.getPosts(this.page).subscribe(res => {
  this.posts = [...this.posts, ...res];
  event.target.complete();
});
if (this.page === this.wp.pages) {
  event.target.disabled = true;
  this.infiniteScroll.disabled = true;
}

}
}
here posts.page.html

<ion-header>

<ion-toolbar color=“primary”>

<ion-title>Posts</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding>

<div text-center *ngIf=“count”>Found {{ count }} posts</div>

<ion-card *ngFor=“let post of posts”>

<ion-card-header>

<ion-card-title [innerHTML]=“post.title.rendered”></ion-card-title>

<ion-card-subtitle>{{ post.date_gmt | date }}</ion-card-subtitle>

</ion-card-header>

<ion-card-content>

<img [src]=“post.media_url”>

<div [innerHTML]=“post.excerpt.rendered”></div>

<ion-button expand=“full” fill=“clear” [routerLink]="[’/’, ‘posts’, post.id]"

text-right>Read more …</ion-button>

</ion-card-content>

</ion-card>

<ion-button (click)=“loadMorePosts()”>Load More</ion-button>

<ion-infinite-scroll threshold=“100px” (ionInfinite)=“loadMore($event)”>

<ion-infinite-scroll-content

loadingSpinner=“bubles”

loadingText=“Loading more posts”>

</ion-infinite-scroll-content>

</ion-infinite-scroll>

</ion-content>

At ngOnInit() the posts loaded. but when I click load more button or infinite scroll the error occurred. the error message is that wp.loadMorePosts() and loadMore($event) not recognized.

any suggestion please ?

Posts: 1

Participants: 1

Read full topic