ionic2- 动态改变离子卡的内容答案

【问题标题】：ionic2- Dynamically change contents of an ion-cardionic2- 动态改变离子卡的内容
【发布时间】：2018-10-14 20:18:24
【问题描述】：

我有一个书籍列表，这些书籍是通过后端 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


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

【问题讨论】：

查看数据更新是否有问题？
是的，不知道如何更新已经迭代的列表中的数据。为了单独识别每张卡，我给每张卡一个唯一的 ID。希望有某种方法可以使用此 ID 更新卡的数据。 @Sagar Kharche
是否需要告诉 Angular 来更新内容？可能正在使用 markForCheck() 在分配数据后尝试调用 markForCheck。
我对此不太熟悉。有没有其他方法来更新html？ @Sagar Kharche
stackoverflow.com/questions/41364386/… 这可以帮助你。

标签： javascript angular ionic-framework ionic2

【解决方案1】：

发布作为答案，因为我无法发表评论。但可能是因为范围变化，使用'=>'而不是'function'。

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;
            }
         });

【讨论】：