如何简化 select 上的 *ngFor
How can I simplify an *ngFor on a select
目前,我可以通过使用 *ngFor 和 +1 来获取人数来显示家庭人数,以便正确选择;然而,这只给了我一个选择选项,我需要 i + 10 的人数
我试过在选项上使用 *ngFor 但没有成功
<label for="household_size">Household Size *</label>
<select class="custom-select" id="household_size" formControlName="household_size">
<option min="i + 1" *ngFor="let person of getPeoples(); let i = index" [value]="i + 1">{{i + 1}}</option>
<option min="i + 2" *ngFor="let person of getPeoples(); let i = index" [value]="i + 2">{{i + 2}}</option>
<option min="i + 3" *ngFor="let person of getPeoples(); let i = index" [value]="i + 3">{{i + 3}}</option>
<option min="i + 4" *ngFor="let person of getPeoples(); let i = index" [value]="i + 4">{{i + 4}}</option>
<option min="i + 5" *ngFor="let person of getPeoples(); let i = index" [value]="i + 5">{{i + 5}}</option>
<option min="i + 6" *ngFor="let person of getPeoples(); let i = index" [value]="i + 6">{{i + 6}}</option>
<option min="i + 7" *ngFor="let person of getPeoples(); let i = index" [value]="i + 7">{{i + 7}}</option>
<option max="i + 8" *ngFor="let person of getPeoples(); let i = index" [value]="i + 8">{{i + 8}}</option>
<option max="i + 9" *ngFor="let person of getPeoples(); let i = index" [value]="i + 9">{{i + 9}}</option>
<option max="i + 10" *ngFor="let person of getPeoples(); let i = index" [value]="i + 10">{{i + 10}}</option>
<option max="i + 11" *ngFor="let person of getPeoples(); let i = index" [value]="i + 11">{{i + 11}}</option>
</select>
应该有一个包含 11 个选项 1、2、3 等的下拉列表。
<select class="custom-select" id="household_size" formControlName="household_size">
<option min="i + 1" *ngFor="let person of getPeoples(); let i = index" [value]="i + 1">{{i + 1}}</option>
</select>
在 TS 中用这个解决了
householdSizeOptions = [];
getAmountOfPeople(){
this.householdSizeOptions = [];
for (let i = this.getPeoples().length; i < this.getPeoples().length + 10; i++){
this.householdSizeOptions.push(i);
}
}
而这个在 HTML
<select class="custom-select" id="household_size" formControlName="household_size">
<option *ngFor="let count of householdSizeOptions" [value]="count">{{count}}</option>
</select>
目前,我可以通过使用 *ngFor 和 +1 来获取人数来显示家庭人数,以便正确选择;然而,这只给了我一个选择选项,我需要 i + 10 的人数
我试过在选项上使用 *ngFor 但没有成功
<label for="household_size">Household Size *</label>
<select class="custom-select" id="household_size" formControlName="household_size">
<option min="i + 1" *ngFor="let person of getPeoples(); let i = index" [value]="i + 1">{{i + 1}}</option>
<option min="i + 2" *ngFor="let person of getPeoples(); let i = index" [value]="i + 2">{{i + 2}}</option>
<option min="i + 3" *ngFor="let person of getPeoples(); let i = index" [value]="i + 3">{{i + 3}}</option>
<option min="i + 4" *ngFor="let person of getPeoples(); let i = index" [value]="i + 4">{{i + 4}}</option>
<option min="i + 5" *ngFor="let person of getPeoples(); let i = index" [value]="i + 5">{{i + 5}}</option>
<option min="i + 6" *ngFor="let person of getPeoples(); let i = index" [value]="i + 6">{{i + 6}}</option>
<option min="i + 7" *ngFor="let person of getPeoples(); let i = index" [value]="i + 7">{{i + 7}}</option>
<option max="i + 8" *ngFor="let person of getPeoples(); let i = index" [value]="i + 8">{{i + 8}}</option>
<option max="i + 9" *ngFor="let person of getPeoples(); let i = index" [value]="i + 9">{{i + 9}}</option>
<option max="i + 10" *ngFor="let person of getPeoples(); let i = index" [value]="i + 10">{{i + 10}}</option>
<option max="i + 11" *ngFor="let person of getPeoples(); let i = index" [value]="i + 11">{{i + 11}}</option>
</select>
应该有一个包含 11 个选项 1、2、3 等的下拉列表。
<select class="custom-select" id="household_size" formControlName="household_size">
<option min="i + 1" *ngFor="let person of getPeoples(); let i = index" [value]="i + 1">{{i + 1}}</option>
</select>
在 TS 中用这个解决了
householdSizeOptions = [];
getAmountOfPeople(){
this.householdSizeOptions = [];
for (let i = this.getPeoples().length; i < this.getPeoples().length + 10; i++){
this.householdSizeOptions.push(i);
}
}
而这个在 HTML
<select class="custom-select" id="household_size" formControlName="household_size">
<option *ngFor="let count of householdSizeOptions" [value]="count">{{count}}</option>
</select>