Angular 設計按鈕隨機取出陣列資料

angular

vivian00724 2021-11-23 18:20:23 ‧ 866 瀏覽

分享至

請問若一個陣列包含多個object

例如這個

要怎麼設計出按按鈕能隨機取出裡面一組的value值
結果這樣

希望是在html用插值綁定顯示出來
在component 裡面應該要怎麼寫出隨機呼叫一組的功能讓html顯示

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

albert41

iT邦新手 3 級 ‧ 2021-11-23 22:03:47

最佳解答

可以另外開一個 property 作為隨機選取的 Pokemon objet, 然後 template 綁定這個 property 做為顯示。

private _pokemonList: Pokemon[] = [ /* ... */ ];
public selectedPokemon: Pokemon;
public counter: number = 0;

ngOnInit() {
    getRandomPokemon();
}

public getRandomPokemon() {
    this.counter++;
    const randomIndex = Math.floor(Math.random() * this._pokemonList.length);
    this.selectedPokemon = this._pokemonList[randomIndex];
}