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

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

Answer 2

*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>

它与离子无关，请相应更新。

如何将离子选择值从1循环到api中的数字？

2 个答案: