Ionic4中如何用TypeScript自动生成20-220的ion-select选项

No need to write out all those numbers manually! TypeScript is fully compatible with the JavaScript array tricks you found, and we can adapt them seamlessly for your Ionic 4 app. Let's break this down into two simple parts: generating the number array in your component, then binding it to the ion-select in your template.

Step 1: Generate the 20-220 Number Array in TypeScript #

Here are two clean, concise ways to create your range of numbers in TypeScript:

Method 1: Using Array.from() (Most Readable) #

This is my go-to approach—it’s straightforward and easy to understand at a glance:

// In your component.ts file
import { Component } from '@angular/core';

@Component({
  selector: 'app-number-select',
  templateUrl: './number-select.component.html',
  styleUrls: ['./number-select.component.scss'],
})
export class NumberSelectComponent {
  // Generate array from 20 to 220 inclusive
  numberOptions: number[] = Array.from({ length: 201 }, (_, index) => index + 20);
}

The {length: 201} creates a placeholder array with 201 items (since 220 - 20 + 1 = 201). The second argument is a mapping function that takes each index (starting at 0) and adds 20 to it—giving us exactly the range we need.

Method 2: Using Array.keys() + Spread Operator #

If you prefer a more functional style, this works just as well:

// In your component.ts file
numberOptions: number[] = [...Array(201).keys()].map(num => num + 20);

Array(201).keys() gives us an iterator of numbers from 0 to 200. The spread operator (...) converts that iterator to a plain array, then we map each number to add 20—shifting the range to 20-220.

Step 2: Bind the Array to ion-select in Your Template #

Now just loop through the numberOptions array with *ngFor to auto-generate all your ion-select-option elements:

<!-- In your component.html file -->
<ion-item>
  <ion-label>Select a Number</ion-label>
  <ion-select placeholder="Choose a value" [(ngModel)]="selectedNumber">
    <ion-select-option *ngFor="let num of numberOptions" [value]="num">
      {{ num }}
    </ion-select-option>
  </ion-select>
</ion-item>

If you need to track the user’s selected value, just declare selectedNumber: number; in your component class to pair with the [(ngModel)] binding.

Both of these TypeScript approaches work perfectly in Ionic 4—they’re standard ES6+ features that TypeScript fully supports, no extra libraries required!

内容的提问来源于stack exchange，提问作者Tom