Question

我想在我的表单中下拉。我知道如何静态地在下拉列表中添加选项，但是，我希望它是动态的。

我的代码

<ion-item>
    <ion-label>Select Type</ion-label>
    <ion-select [(ngModel)]="selectedvalue" #item>
        <ion-option *ngFor="let item of items" [value]="item">{{item}}</ion-option>
    </ion-select>
</ion-item>

我为此编写了html代码。但我不知道在我的.ts文件中该怎么做。如何为项目赋值？

Answer 1

您需要在代码中执行的操作是定义选项数组和Page.ts中所选选项的变量，并在某些时候使用选项对象填充它。所以像这样定义数组......（我在这里为每个属性使用TypeScript定义，因为为什么不呢）

export class Page {
    selectedValue: number;
    optionsList: Array<{ value: number, text: string, checked: boolean }> = [];

    constructor() { }

或者像这样的东西也可以起作用......

    optionsList: any[] = [];

然后使用选项对象填充数组（如果要预先选择选项，则每个对象应具有2个属性，并且可选择第3个属性）。

执行此操作取决于是否异步填充。对于这个例子，我将在构造函数中执行...

constructor() {
     this.optionsList.push({ value: 1, text: 'option 1', checked: false });
     this.optionsList.push({ value: 2, text: 'option 2', checked: false });
}

你的HTML代码应该是这样的......

<ion-select [(ngModel)]="selectedvalue">
    <ion-option *ngFor="let item of optionsList" value="{{item.value}}" checked="{{item.checked}}">{{item.text}}</ion-option>
</ion-select>

Answer 2

您需要拥有一个模型和一个数组。数组将包含将在“选择”中显示的一组项目。

组件代码如下所示：

export class Modal {

categories = [
 {
   title: 'Locked',
   price: 100 
 },
 {
   title: 'Liquid',
   price: 8000
 }];         

 selectedCategory = this.categories[0]; 

}

模板代码如下所示：

<ion-item>
    <ion-select [(ngModel)]="selectedCategory">
          <ion-option *ngFor="let category of categories;" 
                  [value]="category">{{category.title}}</ion-option>      
    </ion-select>
</ion-item>

希望这会有所帮助。

如何在离子2的下拉列表中动态添加值

2 个答案: