如何使用Typescript使用動態鍵定義數組？

我正在使用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; 
    } 

}

onPlayerReady時調用視頻播放器在我看來intialize。 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]沒有明確定義的任何地方。但是，這是一個問題，因爲我不知道將會有多少物品。我如何正確定義這個數組來允許這種行爲？

來源

2017-07-25 Mike

您需要在構造函數中將您的變量設置爲空數組：this.api = []; –

數組沒有「鍵」，它們有「索引」。根據定義，所有陣列都是動態的。 – 2017-07-25 12:46:02

這是因爲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; 
    } 
}

來源

2017-07-25 11:32:37 cyrix

我想知道爲什麼有人已經投下了這個答案。看不出有什麼問題。 – robbannn

可能是因爲OP的問題等於打字錯誤。他得到一個錯誤，說'不能設置未定義的屬性'1'。因此，顯然'this.api'是未定義的。「this.api」是未定義的，因爲它沒有被初始化，這並不奇怪。 – 2017-07-25 12:48:17

不是很有建設性的@torazaburo。 ''api'在構造函數中定義 - 我知道'api [1]'沒有被定義（我在我的問題中說過），我知道這就是爲什麼我得到這個錯誤，問題是爲什麼當它在構造函數中設置爲「any」時就是這種情況。這個答案可以解答。你的評論是非常無助的，沒有建設性的和錯誤的;沒有錯字，我只是不知道我必須初始化爲一個數組。 – Mike

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

來源

2017-07-25 11:48:25 AndyJ

如何使用Typescript使用動態鍵定義數組？

回答

相關問題