Использование * ngFor и получение html-текста с ion-label

Question

У меня возникла проблема, когда я использую * ngFor, как это в моем 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>

из массива в моем файле TS:

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'];

Работает нормальнои он отображается так, как я хочу, но моя проблема в том, что я хотел бы получить по клику текст внутри ионной метки {{questionNumber}}

Я пробовал @viewchild и getElementbyId, но он возвращает(или печатает) первое значение, равное 01. Когда я проверяю HTML инструментов разработчика, там присутствуют все HTML от 01 до 40, а также они отображаются на моем экране. Почему-то мне не удается восстановить все номера. Мне бы хотелось, чтобы всякий раз, когда я нажимал на 01, он возвращал 01, а 02 возвращает 02 и т. Д.

это мой метод:

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

У меня не так много сейчасЯ пытался все виды вещей, но он всегда возвращает только первое значение. Спасибо

Answer 1

Вы можете просто сделать это на (click)

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

Или попробуйте так:

.html

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

.ts

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