Ionic2 - Динамическое изменение содержимого ионной карты

У меня есть список книг, которые загружаются в класс через провайдера из внутреннего API. Это образцы данных, которые я получаю

 {
   "success":true,
   "books":[
      {
         "id":1000,
         "book_code":"CC219102",
         "read_status":"completed",
         "name":"Book A",
         "price":"80"
      },
      {
         "id":1001,
         "book_code":"CC219103",
         "read_status":"reading",
         "name":"Book B",
         "price":"50"
      },
      {
         "id":1002,
         "book_code":"CC219104",
         "read_status":"completed",
         "name":"Book C",
         "price":"120"
      },
      {
         "id":1003,
         "book_code":"CC219105",
         "read_status":"yet_to_read",
         "name":"Book D",
         "price":"75"
      },
      {
         "id":1004,
         "book_code":"CC219106",
         "read_status":"completed",
         "name":"Book E",
         "price":"100"
      }
   ]
}

Как видите, в этом случае API возвращает пять книг. Я вызываю функцию loadBooks () внутри контроллера для получения этих данных, и они хранятся в массиве myBooks: any = [];

Я повторяю этот массив и отображаю каждую книгу с помощью ионной карты.

Дело в том, что полученные нами данные могут измениться. И есть еще одна функция refreshBookData (), которая снова извлекает данные, и это было реализовано с использованием сокета. Поэтому, когда есть изменения, я хочу также показать изменения на странице html

Если цена книги изменится, в этой функции будет доступна новая цена, и я хочу обновить информацию о карте для этой книги.

В сети это легко сделать. Не знаю, как этого добиться в ионной среде. Может ли кто-нибудь предложить мне решение?

HTML КОД

  <ion-card *ngFor = "let book of books" id = "{{book.book_code}}">
    <ion-grid>
      <ion-row class = "{{book.read_status}} row">
        <ion-col>
            <span>{{book.name | uppercase}}</span>          
        </ion-col>
        <ion-col>
          <div>
            <div float-right>{{book.price}}</div>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-card>

А класс компонента выглядит так:

import { Component } from '@angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';
import * as io from "socket.io-client";
import { BookServicesProvider } from './../../providers/book-services/book-services';
import { Storage } from '@ionic/storage';


@Component({
  selector: 'page-my-books-page',
  templateUrl: 'my-books-page.html',
})
export class MyJobsPage {
  memberId: any= 1;
  myBooks: any = [];

  constructor(public navCtrl: NavController, public navParams: NavParams,
    private storage: Storage, private bookService: BookServicesProvider) {
    this.loadBooks(this.memberId);
    this.refreshBookData(this.memberId);
  }

  loadBooks(memberId) {
    let reqParams = {
      memberId: memberId
    };
    this.jobService.myJobs(reqParams)
    .then(data => {
        this.myJobs = data['jobs'];
    });
  }

  refreshBookData(memberId) {
    var params = {
        memberId: memberId.toString()
    };
    var socket = io('localhost:3000/books');
    socket.on('connect', function (obj) {

        //Emitting the params to socket
        socket.emit('bookStatuses', params);

        socket.on('book_statuses', function (data) {
            //received data; storing it in temp variable
            var myBooksTemp = data.books;

            if (myBooksTemp) {
                //iterating through the changed data
                myBooksTemp.forEach((value, key, index) => {


                    //code to change html here


                });
            }
        });
    });
  }
}