Question

我必须从基于事件的回调函数更新数组（在我的html模板中有界）。但是当我在回调中访问它时，它是undefined。

export class HomePage {

  constructor(public navCtrl: NavController) {
    let consumer: string[]; // <=== Updating this array
    const realtime = new Ably.Realtime('API-KEY');
    const channel = realtime.channels.get("test");
    channel.subscribe((msg) => {

      console.log("Received: " + msg.data);
      consumer.push(msg.data); // <=== but "consumer is undefined here"

    });
  }

}

HTML模板

  <div>
    <ul *ngFor="let item of consumer">
      <li>{{item}}</li>
    </ul>
  </div>

Answer 1

您没有初始化您的消费者数组。

更改此行

let consumer: string[];

到

let consumer: string[] = [];

然后它是一个空数组，你可以在其中推送一些数据。

此致

Answer 2

将此数组移出let consumer: string[]; // <=== Updating在构造函数之外 - ＆gt;例如，在它之上。

然后，删除'let'关键字并将其初始化为空数组= []; 现在您可以在模板中使用它。

Answer 3

这里有两个问题：

consumer未被组件公开。它仅在构造函数中可用。所以你将无法在模板中循环它。将其更改为财产。
consumer永远不会被初始化。您只提供了类型，但未分配任何内容。

您可以通过将consumer声明并初始化为属性来解决这些问题：

export class HomePage {
  consumer: string[] = []; // Declare and initialize here
  constructor(public navCtrl: NavController) {
    const realtime = new Ably.Realtime('API-KEY');
    const channel = realtime.channels.get("test");
    channel.subscribe((msg) => {

      console.log("Received: " + msg.data);
      this.consumer.push(msg.data);

    });
  }

}

从事件回调更新数组

3 个答案: