how to populate data from first array on randomly selected card?

I want to make a random card in Angular, where every time I select the first card to click it will take the first value from the array and the other cards will be filled automatically with other array values. and click can only be done once. thank you.

here my code sandbox

here my angular component:

export class AppComponent {
arrayData: any = \["one", "two", "three"\];
value: any = "";

clicker() {
this.value = this.arrayData\[0\];
}
}

and this for html:

<div  \*ngFor="let v of arrayData" (click)="clicker()"\>
<label\>{{value}}\</label\>
<p>
  How to get arrayData[0] on card selected and filled in other card with
  arrayData[1] and arrayData[2] then disable click
</p>

i hope any one can help me to solve this problem!!! thanks you.

CodePudding user response：

You are looping the array in HTML, but in the loop, you are outputting one value from this.value three times. Just loop the array, and use its elements to display, but only after a card was clicked. (The json pipe helps if the elements are objects...)

<div  *ngFor="let v of arrayData" (click)="clicker()">
  <label *ngIf="clicked">{{v | json}}</label>
</div>
<p>
  How to get arrayData[0] on card selected and filled in other card with
  arrayData[1] and arrayData[2] then disable click
</p>

and in TS:

clicked = false;

clicker() {
  this.clicked = true;
}

CodePudding user response：

You show as many cards as the length of array - ok. On each card you show value of the variable value - the same variable.

<div  *ngFor="let v of arrayData" (click)="clicker()">
<label>{{value}}</label>
</div>

You have no association of card with values.

It would be helpful to add: (You can also do better - programmatically create as many array objects as arrayData length)

  cards: any = [
    { id: 1, value: null },
    { id: 2, value: null },
    { id: 3, value: null }
  ];

Now for each card you have the option to assign a value. In template you can display:

<div
  
  *ngFor="let card of cards; let i = index"
  (click)="onCardClick(i)"
>
  <label>{{ card.value }}</label>
</div>

{{ card.value }} - value of unique card.

Pay attention to the *ngFor="let card of cards; let i = index" - we have an (incremented) index here - information about which card was clicked.

In onCardClick method we check whether the user has already performed such an operation.

  onCardClick(index: number) {
    if (!this.shuffled) {
      this.clicker(index);
    }
  }

In else you can show the user an alert or whatever to let them know they've already done it.

If not, call the method clicker.

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

In foreach loop through the next elements of cards. If element has the same index as clicked card, assign first value of arrayData. Otherwise assign arrayData[1], arrayData[2]...

At least, this.shuffled = true, that the operation cannot be performed again.

I hope I understood what you wanted to accomplish :)

See working code https://codesandbox.io/s/loving-wind-gku7vl