我正在做一个 Ionic(Angular) 项目,我正在尝试使用特定范围的数字进行选择,但我不想手动编写它们,因为它不是很有效,但我不知道如何在打字稿中做到这一点。
如您所见,在“年龄”变量中,我希望将数字创建为选择的选项
这是打字稿文件
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-user-appearance',
templateUrl: './user-appearance.component.html',
styleUrls: ['./user-appearance.component.scss']
})
export class UserAppearanceComponent {
appearanceForm = new FormGroup({
age: new FormControl(''),
height: new FormControl(''),
weight: new FormControl(''),
ethnicity: new FormControl(''),
eyesColor: new FormControl(''),
hairLength: new FormControl(''),
hairColor: new FormControl('')
});
ages: number[] = [1,2,3,4,5,6,7,8,9,10];
constructor() { }
submit() {
console.log(this.appearanceForm.get('age').value);
}
}
这是html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button
text="{{'back' | translate}}">
</ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>{{'letUsKnowHowYouLook' | translate}}</h1>
<h3>{{'easyToIdentifyYou' | translate}}</h3>
<form [formGroup]="appearanceForm" (ngSubmit)="submit()">
<ion-item >
<ion-label>{{'age' | translate}}</ion-label>
<ion-select placeholder='{{"selectOne" | translate}}' formControlName="age">
<ion-select-option *ngFor="let age of ages">{{age}}</ion-select-option>
</ion-select>
</ion-item>
<app-input [label]="'height'| translate" formControlName="height"></app-input>
<app-input [label]="'weight'| translate" formControlName="weight"></app-input>
<app-input [label]="'ethnicity'| translate" formControlName="ethnicity"></app-input>
<app-input [label]="'eyesColor'| translate" formControlName="eyesColor"></app-input>
<app-input [label]="'hairLength'| translate" formControlName="hairLength"></app-input>
<app-input [label]="'hairColor'| translate" formControlName="hairColor"></app-input>
<ion-button expand="block" type="submit" >{{'confirm' | translate}}</ion-button>
</form>
</ion-content>
检查这个。
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-user-appearance',
templateUrl: './user-appearance.component.html',
styleUrls: ['./user-appearance.component.scss']
})
export class UserAppearanceComponent {
appearanceForm = new FormGroup({
age: new FormControl(''),
height: new FormControl(''),
weight: new FormControl(''),
ethnicity: new FormControl(''),
eyesColor: new FormControl(''),
hairLength: new FormControl(''),
hairColor: new FormControl('')
});
ages: number[];
constructor() {
const range = (start, end) => Array.from({ length: (end - start) }, (v, k) => k + start);
this.ages = range(1, 11);
}
submit() {
console.log(this.appearanceForm.get('age').value);
}
}
要点是在构造函数中添加范围。
ages: number[];
constructor() {
const range = (start, end) => Array.from({ length: (end - start) }, (v, k) => k + start);
this.ages = range(1, 11);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句