无法在数组中获取随机项（Angular 10）答案

【问题标题】：Can't not get an random item in an array (Angular 10)无法在数组中获取随机项（Angular 10）
【发布时间】：2020-08-31 05:20:06
【问题描述】：

我正在尝试从 flashCards 数组中随机化项目（包含英文单词的卡片），以便在用户重新加载页面时每张卡片都可以随机出现。我使用过 Math.floor(Math.random()) 函数，但它不起作用。如何从一组卡片中随机获取卡片？

home.page.html：

<ion-content padding>
     <app-flash-card *ngFor="let card of flashCards" [ngClass]="randomize()">
        <div class="flash-card-front">{{card.front}}</div>

        <div class="flash-card-back">{{card.back}}</div>
     </app-flash-card>  
</ion-content>

home.page.ts：

export class HomePage {

    flashCards: any;
  
  constructor(public navCtrl: NavController) {
        this.flashCards = [
            {back: 'accreditation', front: 'offizielle Zustimmung'},
            {back: 'AIDA', front: 'Attention, Interest, Desire, Action (Aufmerksamkeit, Interresse, Wunsch, Handlung)-> Modell zur Werbewirkung'},
            {back: 'airtime', front: 'Sendezeit'},
            {back: 'ambient noise', front: 'Umgebungsgeräusch'},
            {back: 'ambitious', front: 'ehrgeizig,strebsam'}
        ];
    };
    randomize(){    
        var cards=this.flashCards[Math.floor(Math.random()*this.flashCards.length)];
        return this.flashCards[cards];
    }
}

【问题讨论】：

你想在打印它们的内容之前随机化数组吗？
是的，我想随机化数组
你可能对 this 感兴趣，在构造函数或 OnInit 上随机化数组。
您也错误地使用了指令 ngClass，它们是用于类的，请阅读它们here
shuffle(flashCards) { var currentIndex = this.flashCards.length,temporaryValue,randomIndex; // 虽然还有剩余的元素要洗牌... while (0 !== currentIndex) { // 选择一个剩余的元素... randomIndex = Math.floor(Math.random() * currentIndex);当前索引-= 1； // 并将其与当前元素交换。临时值=闪存卡[当前索引]；闪存卡[当前索引] = 闪存卡[随机索引]；闪存卡[随机索引] = 临时值； } 控制台.log（闪存卡）；归还抽认卡； }

标签： angular typescript ionic-framework

【解决方案1】：

只是为了发布一个完整的解决方案： 如 cmets 中所述，您可以简单地使用现有的 shuffle 函数并在构造函数或 ngOnInit 函数中访问它（Angular 的方式）。我将您的抽认卡放在新的var 上，并在改组后将其设置为this.flashCards（this.flashCards 稍后在您的html 中使用）。这将确保数组在显示之前是随机播放的：

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

export class HomePage implements OnInit {

    flashCards: any;
  
    constructor(public navCtrl: NavController) { }

    ngOnInit(): void {
        var flashCards = [
            {back: 'accreditation', front: 'offizielle Zustimmung'},
            {back: 'AIDA', front: 'Attention, Interest, Desire, Action (Aufmerksamkeit, Interresse, Wunsch, Handlung)-> Modell zur Werbewirkung'},
            {back: 'airtime', front: 'Sendezeit'},
            {back: 'ambient noise', front: 'Umgebungsgeräusch'},
            {back: 'ambitious', front: 'ehrgeizig,strebsam'}
        ];
        this.flashCards = this.shuffle(flashCards)
    }

    shuffle (array) {
        var currentIndex = array.length, temporaryValue, randomIndex;

        // While there remain elements to shuffle...
        while (0 !== currentIndex) {

            // Pick a remaining element...
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;

            // And swap it with the current element.
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }

        return array;
    }
}

另外，删除你的[ngClass]，然后这样写：

<ion-content padding>
     <app-flash-card *ngFor="let card of flashCards">
        <div class="flash-card-front">{{card.front}}</div>

        <div class="flash-card-back">{{card.back}}</div>
     </app-flash-card>  
</ion-content>

改组是在ngOnInit 中完成的，[ngClass] 无论如何都不是正确的方法。

祝你好运！

【讨论】：

谢谢你的详细解释！！！！对我帮助很大！