Как мне пройти через значение ионного выбора от 1 до числа из API?

Question

Я работаю над этим ионным приложением, и мне было интересно, как я могу сделать цикл от 1 до 56 (значение из API).

<ion-select [(ngModel)]="pax">
    <ion-option value="{{index}}" *ngFor="let index of [0,1,2,3,4,5]">      
    {{index}}</ion-option>
</ion-select>

Это работает, но когда я изменяю *ngFor на let index of [1..book.pages], это ничего не показывает.

Answer 1

*ngFor можно использовать для повторения элементов для любого повторяемого объекта. Здесь [1..book.pages] не является массивом. Вы также, кажется, неправильно используете оператор распространения .... Вместо этого для циклического перебора диапазона чисел создайте массив динамически, а затем используйте его в директиве *ngFor.

Кроме того, value="{{index}}" неверно. Нет необходимости использовать интерполяцию строк {{ }} в тегах HTML.

Следующий код может помочь вам:

в some.component.ts

  value = getValueFromApi();
  pages = new Array(this.value);
  constructor(){
    for (let index = 0; index < this.pages.length; index++) {
      //any custom logic
      this.pages[index] = index;    
    }

в some.component.html

<ion-select [(ngModel)]="anyModel" *ngFor="let index of pages">
   <ion-option value="index"> {{index}} </ion-option>  
</ion-select>

Это не имеет ничего общего с ионным, пожалуйста, обновите его соответственно.

Answer 2

[1..xxx] недопустимо в синтаксисе шаблонов TypeScript или Angular (по крайней мере, насколько я знаю и проверил). Вы можете создать функцию в своем компоненте и использовать свой любимый метод в TypeScript для создания такого массива (или даже создать канал, который делает это, если вам нужно использовать его между компонентами).

Вот один пример:

<ion-select [(ngModel)]="pax">
    <ion-option value="{{index}}" *ngFor="let index of getOptions(book.pages)">      
    {{index}}</ion-option>
</ion-select>

getOptions(num: number) {
    return Array.from({length: num}, (v, k) => k + 1);
}