Ionic Angular 数字范围( typescript )

b1uwtaje 于 2022-12-09 发布在 Ionic

关注(0)|答案(1)|浏览(262)

我正在做一个离子（Angular ）项目，我试图选择一个特定的数字范围，但我不想写他们的手，因为它不是真的有效，但我不知道如何在 typescript 。
如您所见，在“年龄”变量中，我希望将数字创建为选择的选项
这是打印脚本文件

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>

ionic-framework

来源：https://stackoverflow.com/questions/72587471/range-of-numbers-in-angulartypescript

1条答案

按热度按时间

v9tzhpje1#

看看这个。

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);
 }
}

Main Point是在构造函数中添加范围。

ages: number[];
constructor() {
 const range = (start, end) => Array.from({ length: (end - start) }, (v, k) => k + start);
 this.ages = range(1, 11);
}

赞(0）回复(0）举报 2022-12-09

我来回答

Ionic Angular 数字范围( typescript )

1条答案

相关问题

热门标签

最新问答