【问题标题】:ion-list display asynchronously added data to arrayion-list 显示异步添加的数据到数组
【发布时间】:2018-02-07 20:17:28
【问题描述】:

我是离子新手。我试图制作一个搜索蓝牙设备并显示它们的应用程序。 我创建了一个搜索蓝牙设备的服务。当设备发现事件时发布如下:

this.event.publish("ibeacon", newBeacon);

这是我的事件注入:

import { Events } from 'ionic-angular/util/events';
......
constructor(private event: Events){}

这是我订阅事件以获取发布数据的方式:

this.event.subscribe("ibeacon", (newBeacon) => {
  this.iBeacons.push(newBeacon);
});

如您所见,我已经声明了一个 iBeacons 数组,我在其中推送接收到的对象。问题是当我尝试显示 iBeacons Array 内容时没有显示任何内容。这是我显示数组的方式:

<ion-content padding>

  <ion-list>
   <ion-item *ngFor="let beacon of iBeacons">
     <ion-label>
      {{ beacon.hash }}
     </ion-label>
   </ion-item>
 </ion-list>

</ion-content>

开头的数组是空的。 我已经检查并在订阅活动时正确收到了我的设备。 我没有收到错误。 我认为数据没有显示,因为数据是异步添加到 iBeacons 数组中的。有什么想法吗?

以下是一些 iBeacons 数组包含的内容:

(4) [{…}, {…}, {…}, {…}]
0: {hash: "b5d787ac973341a59bf73838eededcb4", uuid: "fda50693-a4e2-4fb1-afcf-c6eb07647825", major: "10001", minor: "10301", lastFoundTime: 1518003454401}
1: {hash: "50aee081c9833e51ce00b9aa4a0c062d", uuid: "fda50693-a4e2-4fb1-afcf-c6eb07647825", major: "10001", minor: "10206", lastFoundTime: 1518003454391}
2: {hash: "1c8ecafb6efbbc37f905d95551291672", uuid: "fda50693-a4e2-4fb1-afcf-c6eb07647825", major: "10001", minor: "10208", lastFoundTime: 1518003454391}
3: {hash: "442e383d9c582985083b5b05f07161d2", uuid: "fda50693-a4e2-4fb1-afcf-c6eb07647825", major: "10001", minor: "10205", lastFoundTime: 1518003454392}
length: 4
__proto__: Array(0)

这里是 iBeacons 数组初始化:

iBeacons:any [] = [];

【问题讨论】:

  • *ngFor 每次更新变量时都会更新。所以问题出在其他地方。你能console.log数组并将它的内容添加到问题中吗?
  • 我在我的问题中添加了一些 iBeacons 数组。
  • 谢谢,这看起来不错。不要将数据推送到数组,而是尝试这样做:this.iBeacons = this.iBeacons.concat(newBeacon)。我可以想象,如果你不设置变量它不会触发。
  • 仍然没有显示
  • 好的,你是如何初始化变量iBeacons的,你能把这个也添加到你的问题中吗?你有没有尝试硬编码一些数组来检查它是否出现?

标签: arrays asynchronous events ionic-framework


【解决方案1】:

尝试像这样使用 ChangeDetectorRef:

import { ChangeDetectorRef } from '@angular/core';

constructor(private cd: ChangeDetectorRef) {}

this.event.subscribe("ibeacon", (newBeacon) => {
  this.iBeacons.push(newBeacon);
  this.cd.detectChanges();
});

【讨论】:

  • 嘿,谢谢它的工作;)但是当我转到上一页并再次开始扫描时,我得到了这个错误:未捕获的错误:ViewDestroyedError:尝试使用已破坏的视图:detectChanges
  • 我想通了。我不得不取消订阅该活动。谢谢你:)
猜你喜欢
  • 2021-08-22
  • 2015-08-18
  • 2018-03-02
  • 1970-01-01
  • 2011-11-30
  • 1970-01-01
  • 2011-06-24
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多