Question

我正在使用Ionic 2，它位于Angular 2之上。我需要创建一个项目数组。我不知道该阵列中有多少项目。

这是我的Typescript，简化：

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

import { VgAPI } from 'videogular2/core';

@Component({
  selector: 'page-class',
  templateUrl: 'class.html'
})
export class ClassPage {
  api: any[];

  constructor(...){}

  // Load API when videos are ready
  onPlayerReady(api: VgAPI, i: any) {
    this.api[i] = api;
  }

}

当我视图中的视频播放器初始化时，会调用{p> onPlayerReady。 i是该玩家的ID（0,1,2，...）。

我希望这能构建一个数组：

this.api[0] = VgAPI (of player 1)
this.api[1] = VgAPI (of player 2)
this.api[2] = VgAPI (of player 3)
this.api[3] = VgAPI (of player 4)
this.api[4] = VgAPI (of player 5)

不幸的是，我得到以下内容：

Runtime Error
Cannot set property '1' of undefined

我认为这是因为this.api[0]未在任何地方明确定义。但这是一个问题，因为我不知道会有多少项目。如何正确定义此数组以允许此行为？

Answer 1

Arrays in JavaScript are naturally dynamic in length因此您无需在初始化期间提供尺寸。

JavaScript数组的长度及其元素的类型都不固定。

你还没有初始化数组，所以你只需要这样做，没有大小。

即

api: any[];应为api: any[] = [];

这是一个工作JSFiddle，稍微清理一下。

interface VgAPI {
  name: string;
}

class ClassPage {
  private api: VgAPI[] = [];

  public onPlayerReady = (api: VgAPI, index: number) => {
    this.api[index] = api;
  };
}

let classPage = new ClassPage();
classPage.onPlayerReady({ name: "foo" }, 1);

Answer 2

因为api是undefined，您必须将其设置为空数组：

@Component({
  selector: 'page-class',
  templateUrl: 'class.html'
})
export class ClassPage {
  // initialize as empty array
  public api: VgAPI[] = [];

  constructor(...){}

  // Load API when videos are ready
  onPlayerReady(api: VgAPI, i: number) {
    this.api[i] = api;
  }
}

如何使用Typescript定义带有动态键的数组？

2 个答案: