Question

我有一个html代码片段，该片段必须重复一次，因为它来自一个变量，所以我尝试了ngFor，但是它对我不起作用。变量quantityPiani包含一个由服务传递给它的数字（整数）

<form [formGroup]="formPiano">
  <div class="tab">
    <div class="d-flex alert alert-primary sub-container" *ngFor="let q of quantpiani" role="alert">
      <!-- qui va inserito il ciclo for a seconda della quantità sopra riportata -->
      <div class="scheda">
        <div>
          <h3>PIANO</h3>
        </div>
        <div>
          <h5>Livello del piano:</h5>
          <input type="number" name="" id="piano" formControlName="piano" required>
        </div>
        <div>
          <h5>quantità stanze:</h5>
          <select formControlName="stanze">
            <option [ngValue]="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</form>
<div>
  <button [routerLink]="['/ufficio']" routerLinkActive="router-link-active">Indietro</button>
  <button [routerLink]="['/stanza']" routerLinkActive="router-link-active">Avanti</button>
</div>

Answer 1

ngFor与集合一起使用。因此，如果要将其用作for循环，则为指令创建模拟数组是可能的方法之一。

将quantityPiani变量转换为包含组件中符号值的数组。

quantityPiani = new Array(quantityPiani).fill(0);     //Create an array of quantityPiani number of elements

在您的ngFor指令中使用此数组：

<div class="d-flex alert alert-primary sub-container" *ngFor="let q of quantPiani" role="alert">

注意：quantityPiani变量中的大写已在您的模板代码中得到纠正。

我如何在角度重复代码片段

1 个答案: