如何在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文件中该怎么做。如何给项目分配值？

- Varshil shah

---

你的页面中有一个名为items的数组列表吗？请展示page.ts代码。 - Will.Harris

不好意思，我是新手，不知道如何创建ArrayList或Array。如果您有示例代码，请给我展示一下。 - Varshil shah

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>

- Will.Harris

---

我还有一个问题..在.ts文件中如何验证电子邮件字段...我知道这是不同的点.. - Varshil shah

你需要创建一个自定义验证器并使用正则表达式来验证邮件。这取决于你是想要全局的验证器还是只在Page.ts内。我建议你提出一个新问题或进行研究。也许这篇帖子可以帮助你：https://dev59.com/y1sX5IYBdhLWcg3wPdU7 - Will.Harris

嗨，Will Harris，我想获取数组列表中的选定值，我该如何获取它？ - Varshil shah

我不太确定你在问什么。此外，在Stackoverflow上询问已经得到答案的问题并提出其他问题并不是一个好的做法。也许值得创建另一个问题，以便您可以提供有关问题的更多细节 :) - Will.Harris

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> 

希望这能有所帮助。

- Yuvraj Patil