Question

我试图在单击下一个按钮时从模式中的测验中显示一个新问题。我以前没有使用过角度2，所以我确定我错过了一些琐碎的部分。我知道可以从html访问问题，因为我已经以其他方式显示它们但我不能让它们逐个显示在模态中。

html：

<div id="modal" class="modal modal-fixed-footer" materialize="modal" [materializeActions]="actions">
  <div class="modal-content">
    <div *ngIf="let question of questions[pager.index];">
      <div class="badge badge-info">Question {{pager.index + 1}} of {{questions.length}}.</div>
      <p>{{pager.index + 1}}. <span [innerHTML]="question.text"></span></p>
      <div class="row text-left answers">
        <div class="col-md-6" *ngFor="let answer of question.answers">
          <div class="answer">
            <label class="">
                <input type="checkbox" (change)="onSelect(answer.text);"/>
                {{answer.text}}
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" (click)="goTo(pager.index + 1);">Next</button>
  </div>
</div>

任何帮助都会很棒。感谢

Answer 1

您以错误的方式使用question，您可以在您的Component中添加/media/字段，并在goTo（index）函数中填充问题[pager.index]。

Answer 2

这看起来与我的原始代码略有不同，但这就是我在

中实现它的方式

<div *ngIf="pager.index < questions.length">
  <h5 class="flow-text"><span [innerHTML]="questions[pager.index].text"></span></h5>
  <br>
  <div class="row text-left">
    <div class="col s12 m12" *ngFor="let answer of questions[pager.index].answers">
      <div class="answer">
        <input type="checkbox" [(ngModel)]="answer.selected" (change)="onSelect(answer)"/><label class="black-text flow-text"> {{answer.text}} </label>
      </div>
    </div>
  </div>
  <footer class="row">
    <div class="col s6 m6"></div>
    <div class="col s6 m6">
      <div *ngIf="pager.index < questions.length - 1">
        <button id="nextButton" class="btn-flat black-text right flow-text" (click)="goTo(pager.index + 1);">Next</button>
      </div>
      <div *ngIf="pager.index == questions.length - 1">
        <button id="nextButton" class="btn-flat black-text right flow-text" (click)="goTo(pager.index + 1);">Finish</button>
      </div>
    </div>
  </footer>
</div>

在模式中按钮上单击显示数组中的下一个元素

2 个答案: