Displaying cards according to the array length - check. Each card reveals the value of the variable value, which remains constant.
<div class="card" *ngFor="let v of arrayData" (click)="clicker()">
<label>{{value}}</label>
</div>
The cards are not linked to any specific values as they stand.
To improve this, consider adding:
(Alternatively, dynamically generate array objects based on arrayData length)
cards: any = [
{ id: 1, value: null },
{ id: 2, value: null },
{ id: 3, value: null }
];
Now you can assign a value to each card.
You can then display them in the template:
<div
class="card"
*ngFor="let card of cards; let i = index"
(click)="onCardClick(i)"
>
<label>{{ card.value }}</label>
</div>
{{ card.value }} represents the unique value for each card.
Note the usage of *ngFor="let card of cards; let i = index", marking an incremental index that identifies the clicked card.
In the onCardClick method, we verify if the user has already interacted with that particular card.
onCardClick(index: number) {
if (!this.shuffled) {
this.clicker(index);
}
}
Alternatively, you can provide feedback to the user through an alert or similar mechanism indicating prior interaction.
If valid, proceed with calling the clicker method.
clicker(index: number) {
let arrayDataIndex = 1;
this.cards.forEach((card: any, idx: number) => {
if (index === idx) {
card.value = this.arrayData[0];
} else {
card.value = this.arrayData[arrayDataIndex];
arrayDataIndex++;
}
});
this.shuffled = true;
}
Within the foreach loop, iterate over the remaining elements of cards. If the element matches the clicked card's index, assign the initial arrayData value. Otherwise, assign subsequent values from arrayData.
Finally, set this.shuffled = true to prevent repeated actions.
I hope I have captured the essence of your requirements :)
Visit the functional example at
https://codesandbox.io/s/loving-wind-gku7vl