How to display data in html component using ionic and api

Question

I am getting the data in the console but not getting the data in the HTML component in Ionic. How to display the data in blog-list.page.ts .when I am console.log(books) run then I am getting the data but when I am trying it in the HTML component then do not getting the data.

book-list.page.ts

import { Component, OnInit } from '@angular/core';
import{Book} from '../book';
import { first } from 'rxjs/operators';
import{UserService} from '../user.service';

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.page.html',
  styleUrls: ['./book-list.page.scss'],
})
export class BookListPage implements OnInit {
  books: Book[] = [];
  constructor(private userService: UserService) { }

  ngOnInit() {
    this.getBook()
  }

  getBook(){
  this.userService.getBook().pipe(first()).subscribe(books => {
  books = books;
  console.log(books);
});
  }
}

blog-list.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Book List
    </ion-title>
    <ion-buttons slot="end">
      <ion-button routerLink="/user-detail">
        <ion-icon name="add-circle"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-card>


    <ion-card-content>
      <ion-card-subtitle>Books:</ion-card-subtitle>
      <ul *ngFor="let book of books">

        <li>{{book.title}}</li>

      </ul>
      <ion-buttons slot="primary">
        <ion-button routerLink="/edit/">
          <ion-icon slot="icon-only" name="create"></ion-icon>
        </ion-button>
        <ion-button (click)="delete()">
          <ion-icon slot="icon-only" name="trash"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-card-content>
  </ion-card>
</ion-content>

AVJT82 · Accepted Answer · 2019-02-09 11:09:11Z

1

You need to actually assign your data to your variable books:

getBook(){
  this.userService.getBook().pipe(first()).subscribe(books => {
    this.books = books; // use "this"
    console.log(this.books); // now your data is in your array
  });
}

answered Feb 9, 2019 at 11:09

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display data in html component using ionic and api

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related