ionic2 - динамически изменять содержимое ионной карты - PullRequest
Новая
       7

ionic2 - динамически изменять содержимое ионной карты

0 голосов
/ 04 мая 2018

У меня есть список книг, которые доставляются в класс через провайдера из внутреннего интерфейса 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


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

1 Ответ

0 голосов
/ 04 мая 2018

Публикация в качестве ответа, потому что я не могу комментировать. Но, возможно, это потому, что меняется область действия, используйте «=>» вместо «функция». 

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

            if (myBooksTemp) {
               //If I understood right, here is where you get the updated
               //books, so, set in 'myBooks'
               this.myBooks = myBooksTemp;
            }
         });
...