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

Question

我在 HTML 中像这样使用 *ngFor 时遇到问题:

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

来 self 的 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'];

它工作正常并且显示如我所愿，但我的问题是我想通过单击 ionic 标签 {{ questionNumber }}

中的文本来检索

我已经尝试过 @viewchild 和 getElementbyId 但它返回(或打印)第一个值是 01。当我检查开发人员工具的 HTML 时，所有从 01 到 40 的 html 在那里以及它显示在我的屏幕上。出于某种原因，我无法设法检索所有号码。我希望每当我点击 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;
}