如何动态地在离子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中所选选项的变量,并在某些时候使用选项对象填充它.所以像这样定义数组......(我在这里为每个属性使用TypeScript定义,因为为什么不呢)

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

    constructor() { }

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

    optionsList: any[] = [];

然后使用选项对象填充数组(如果要预先选择一个选项,每个对象应该有2个属性,并且可选择第三个属性).

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

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>