角度，按钮需要单击两次才能更改文本

Question

我是初学者，这是一个测验应用程序，其中我陷入了一个问题，即单击按钮需要2次单击。第一次单击时，它可以正常工作，但是当我单击任意按钮时，则需要双击“下一步”和“后退”按钮才能返回到下一个问题或下一个问题旁边。

html：

<div class="qblock" *ngIf="search">
      <div class="qheader">
        <h2>{{ search.questionNumber }}</h2>
      </div>
      <div class="qdescription">
        <p>
          {{ search.questionText }}
        </p>
      </div>
    </div>

    <div class="qactions text-right">
      <button class="btn btn-secondary" (click)="previous(search.index)">
        Back
      </button>
      <button class="btn btn-primary" (click)="next(search.index)">
        Next
      </button>
    </div>
component.ts

public QuizData: any = {};
public number = 0;
  public search: any;
  constructor(private cd: ChangeDetectorRef) {
    this.QuizData = [
      {
        index: 0,
        questionNumber: 'Question 1',
        questionText:
          'Test question 1',
        options: [
          {
            optionLabel: 'A',
            optionText: 'Option A',
            optionActive: false,
          },
          {
            optionLabel: 'B',
            optionText: 'Option B',
            optionActive: false,
          },
          {
            optionLabel: 'C',
            optionText: 'Option C',
            optionActive: false,
          },
          {
            optionLabel: 'D',
            optionText: 'Option D',
            optionActive: false,
          },
        ],
      },
      {
        index: 2,
        questionNumber: 'Question 2',
        questionText:
          'Test question 2',
        options: [
          {
            optionLabel: 'A',
            optionText: 'Option A',
            optionActive: false,
          },
          {
            optionLabel: 'B',
            optionText: 'Option B',
            optionActive: false,
          },
          {
            optionLabel: 'C',
            optionText: 'Option C',
            optionActive: false,
          },
          {
            optionLabel: 'D',
            optionText: 'Option D',
            optionActive: false,
          },
        ],
      },
    ];
    this.number = 0;
    let currentQuestion = this.QuizData[this.number];
    this.number = this.number + 1;
    this.search = currentQuestion;
  }

next(index) {
    let count = Object.keys(this.QuizData).length;
    index = index + 1;
     if (this.number == count) {
       alert('you reached last index');
       this.number = this.number - 1;
       return;
     }
    let nextQuestion = this.QuizData[this.number];
    if (this.number < count) {
      this.number = this.number + 1;
    }
    this.search = nextQuestion;
  }
  previous(index) {
    index = index - 1;
    this.number = this.number - 1;
    if (this.number < 0) {
      this.number = 0;
      return;
    }
    let previousQuestion = this.QuizData[this.number];
    this.search = previousQuestion;
  }
    

我是初学者，这是一个测验应用程序，其中我陷入了一个问题，即单击按钮需要2次单击。第一次单击时，它工作正常，但是当我单击任何按钮时，然后单击下一步...

Answer 1

Demo