使用 *ngFor 并从 ion-label 检索 html 文本

Question

I've been having a problem where I use *ngFor like this in my HTML:

<ion-slides #slides [options]="slideOpts">
      <ion-slide class="numbers-wrapper"
                 *ngFor="let questionNumber of numbers"
                 (click)="clickQuestionNumber()">
        <ion-label #quesNum>{{ questionNumber }}</ion-label>
      </ion-slide>
    </ion-slides>

from an array in my TS file:

numbers = [
    '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
    '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40'];

It works fine and it displays as I wish, but my problem is that I would like to retrieve on click the text inside the ion-label {{ questionNumber }}

I have tried @viewchild and getElementbyId but it returns(or prints) the first value which is 01. When I check on the HTML of Developer tools, all the html from 01 to 40 are there as well as it displays on my screen. For some reason I can't manage to retrieve all numbers. I would like that whenever I click in 01 it returns 01, and 02 returns 02 and and so on.

this is my method:

clickQuestionNumber() {
   this.currentNumber = this.quesNum.nativeElement.innerText;
      }

I don't have much now since I've been trying all sort of things but it always return only the first value. Thank you

Answer 1

You can simply do it on (click)

<ion-slide class="numbers-wrapper"
             *ngFor="let questionNumber of numbers"
             (click)="currentNumber = questionNumber">

Or,Try like this:

.html

 <ion-slide class="numbers-wrapper"
             *ngFor="let questionNumber of numbers"
             (click)="clickQuestionNumber(questionNumber )">

.ts

clickQuestionNumber(number) {
   this.currentNumber = number;
}