javascript - 如何在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 中的选定选项定义选项数组和变量，并在某些时候用选项对象填充它。所以像这样定义数组......(我在这里为每个属性使用 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>