我想在我的表单中添加一个下拉菜单。我知道如何静态地在下拉列表中添加选项,但是,我希望它是动态的。
我的代码
<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 文件中要做什么。如何给项目赋值?
最佳答案
您需要在代码中为 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>
关于javascript - 如何在ionic 2的下拉列表中动态添加值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38142690/