角度數字范圍（打字稿）

我正在研究一個 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>

uj5u.com熱心網友回復：

檢查這個。

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

標籤：有角度的 打字稿 离子框架 范围

上一篇：如何在Powershell中向psobject添加精確值？

下一篇：如何使Ion-toolbar中的欄居中