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

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 中的 selected 选项定义选项数组和变量，并在某些时候用选项对象填充它。所以像这样定义数组...（我在这里为每个属性使用 TypeScript 定义，因为为什么不这样做）

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

    constructor() { }

或者像这样的东西也应该工作...

    optionsList: any[] = [];

然后用选项对象填充数组（每个对象应该有 2 个属性，如果你想预先 select 一个选项，则可以选择第三个属性）。

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

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

你需要一个模型和一个阵列。数组将包含一组项目，这些项目将显示在 "select".

中

组件代码如下所示：

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>

希望这会有所帮助。

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

How to add values in dropdown in ionic 2 dynamically

javascript

ionic2