Question

我的应用程序中有一个数字（插槽数）。

通过使用这个数字值，我需要迭代div里面的div我将要显示按钮。

**用简单的话说：**如果numberOfSlots是12我需要在html中创建12个按钮

但在angular * ngFor中只允许数组迭代。

 <form [formGroup]="staffAddForm" name='staffAddForm' novalidate *ngIf="staffAddForm">
    <div class="col-md-9" formArrayName="staffs">
        <div *ngFor="let data of staffAddForm.controls['staffs'].controls; let i = index" [formGroupName]="i">
            <div class="col-md-12">
                <app-synap-ch [chId]="'user' + '_' + i" 
                [formName]="data.controls['staff']"
                (notifyClickCheckBox)="changeNewStaff($event, i, data)">
            </app-synap-ch>
            <div *ngFor="let item of appointmentsData.numberofSlots; let j = index">
                <button (click) = "getValue()">j+1</button>
            </div>
        </div>
    </div>
</form>

Answer 1

这可能与

重复

Repeat HTML element multiple times using ngFor based on a number

请参考上述问题，这与您的问题相似。

Answer 2

令人讨厌的是，没有一种更简单的方法可以做到这一点并不像是一种解决方法。

我能想到的最简单的解决方案是从数字创建一个新的数组，但是有很多不同的方法来实现这个目标

<强> *。component.html

<div 
    *ngFor='let item of counter(appointmentsData.numberofSlots); let i = index'>
      {{ i }}
</div>

<强> *。component.ts

counter(i: number) {
    return new Array(i);
}

Angular For循环迭代

2 个答案: