HttpErrorResponse в ионном ангулярном

Question

Я пытаюсь работать с Ionic (первая попытка) и почему-то не могу получить данные в моем представлении

код

Service (posts.service.ts)

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 PostsService {

  apiUrl = 'https://example.com/api/posts/';
  url: any;

  constructor(private http: HttpClient) { }

  getPosts(): Observable<any> {
    return this.http.get(`${this.apiUrl}`).pipe(
      map(posts => posts)
    );
  }

  getDetails(url) {
    return this.http.get(`${this.url}?i=${url}&plot=full`);
  }
}

Controller (posts.page.ts)

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { PostsService } from './../../services/posts.service';

@Component({
  selector: 'app-posts',
  templateUrl: './posts.page.html',
  styleUrls: ['./posts.page.scss'],
})
export class PostsPage implements OnInit {

  posts: Observable<any>;

  constructor(private postsService: PostsService) {}

  ngOnInit() {
  }

}

view (posts.page.html)

<ion-list>
  <ion-item *ngFor="let post of posts">
    <div slot="start"></div>
    <img [src]="post.image" />
    {{post.title}}
    <div class="item-note" slot="end">
      {{post.body}}
    </div>
  </ion-item>
</ion-list>

выход

Live API

My APP

Есть идеи, где я ошибся?

Answer 1

Вы должны подписаться на наблюдаемое, чтобы получить результат.Наблюдаемые являются Ленивыми, если вы не подписываетесь, это не будет инициировать вызов. Вы можете использовать угловую асинхронную трубу, которая будет автоматически подписываться и отписываться для вас

 <ion-item *ngFor="let post of getPosts() | async">
    <div slot="start"></div>
    <img [src]="post.image" />
    {{post.title}}
    <div class="item-note" slot="end">
      {{post.body}}
    </div>
  </ion-item>

, или вы можете подписаться насам компонент.

    posts:any;
    ngOnInit() {
    this.poseService.getPosts().suscribe((res)=>{
      this.posts=res;
    })
    }
 <ion-item *ngFor="let post of posts">

Answer 2

решаемые

Пожалуйста, обратитесь к моему другому вопросу, который решил эту проблему.

Ионик не может получить открытые сердечники

Answer 3

Вам нужно позвонить getPosts() на вашем контроллере.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { PostsService } from './../../services/posts.service';

@Component({
  selector: 'app-posts',
  templateUrl: './posts.page.html',
  styleUrls: ['./posts.page.scss'],
})
export class PostsPage implements OnInit {

  posts: Observable<any>;

  constructor(private postsService: PostsService) {}

  ngOnInit() {
      this.posts = this.postsService.getPosts();
  }

}

В вашем html вы также должны указать, что это async

<ion-item *ngFor="let post of posts | async">