angular - Hur kan jag definiera en array med dynamiska nycklar med Typescript?

Jag använder Ionic 2, som ligger ovanpå Angular 2. Jag behöver skapa en array av objekt. Jag vet inte hur många objekt som kommer att finnas i den arrayen.

Här är mitt Typescript, förenklat:

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

}

onPlayerReady kallas när videospelare i min vy initierar. i är ID:t för den spelaren (0, 1, 2, ...).

Jag skulle förvänta mig att detta konstruerar en array av:

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)

Tyvärr får jag följande:

Runtime Error
Cannot set property '1' of undefined

Jag tror att detta beror på att this.api[0] inte är uttryckligen definierad någonstans. Men det är ett problem, eftersom jag inte vet hur många objekt som kommer att finnas. Hur kan jag korrekt definiera denna array för att tillåta detta beteende?

Svar #1

Arrayer i JavaScript är naturligt dynamiska i längd, så du behöver inte ange en storlek vid initialisering.

Varken längden på en JavaScript-array eller typerna på dess element är fasta.

Du har inte initialiserat arrayen, så du behöver bara göra det, utan storlek.

dvs.

api: any[]; ska vara api: any[]=[];

Här är en fungerande JSFiddle med lite städning.

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

Svar #2

Det är för att api är undefined, du måste sätta det som en tom array:

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