使用 ng

我是 angular 的新手。 我正在尝试使用 ng-for 制作一个具有 bs-stepper 的组件。我正在从数据库接收问题数据。我想要的只是用户将逐步回答问题。我需要给“div”不同的 ID。有人知道怎么做吗？

我试图给 "div" id 提供 ng-for 索引

<section class="horizontal-wizard">
      <div id="stepper1" class="bs-stepper horizontal-wizard-example">
        <div *ngFor="let question of questions; let i = index" class="bs-stepper-header">
          <div class="step" data-target="#a{{i}}">
            <button class="step-trigger">
              <span class="bs-stepper-box"><i data-feather="arrow-left" (click)="horizontalWizardStepperPrevious()" class="align-middle mr-sm-25 mr-0"></i></span>
              <span class="bs-stepper-label">
                <span class="bs-stepper-title">Questions</span>
                <span class="bs-stepper-subtitle">Fill the Blanks</span>
              </span>
            </button>
          </div>
          
          
        </div>
        <div class="bs-stepper-content">
          <form (ngSubmit)="(HWForm.form.valid)" #HWForm="ngForm">
            <div>
            <div *ngFor="let question of questions; let i = index" id="a{{i}}" class="content">
              <form #accountDetailsForm="ngForm">
                <div class="content-header">
                  <app-questions-item></app-questions-item>
                </div>


                <div class="d-flex justify-content-between">
                  
                  <button
                    (click)="horizontalWizardStepperNext(accountDetailsForm)"
                    type="submit"
                    class="btn btn-primary btn-next"
                    rippleEffect
                  >
                    <span class="align-middle d-sm-inline-block d-none">Next</span>
                    <i data-feather="arrow-right" class="align-middle ml-sm-25 ml-0"></i>
                  </button>
                </div>
              </form>
            </div>
          </div>
          </form>
        </div>
      </div>
    </section>

您使用

ngFor

div

id

div

要为每个

div

    <div *ngFor="let question of questions; let i = index" class="bs-stepper-header">
      <div class="step" data-target="#a{{i}}">
        ...
      </div>
    </div>
    <div class="bs-stepper-content">
      <form>
        <div>
          <div *ngFor="let question of questions; let i = index">
            <div id="a{{i}}{{j}}" class="content">
              ...
            </div>
          </div>
        </div>
      </form>
    </div>

在这个例子中，每个

id

div

i

j

或者，您可以使用数据库中每个问题的唯一标识符作为

id

希望对您有所帮助！如果您还有其他问题，请告诉我。