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

【问题标题】：How to add values in dropdown in ionic 2 dynamically如何在 ionic 2 的下拉列表中动态添加值
【发布时间】：2016-11-03 16:55:27
【问题描述】：

我想要一个下拉列表。我知道如何在下拉列表中静态添加选项，但是，我希望它是动态的。

我的代码

<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 文件中做什么。如何给项目赋值？

【问题讨论】：

您的页面中有一个名为 items 的数组列表吗？请出示page.ts代码
不，我是新手，所以我不知道如何创建数组列表或数组..所以如果你有示例代码请告诉我。

标签： javascript ionic2

【解决方案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>

【讨论】：

我还有一个问题......我如何验证 .ts 文件中的电子邮件字段......我知道这是不同的点......
您需要创建一个自定义验证器并使用正则表达式来验证电子邮件。这可能会有很大不同，具体取决于您希望验证器是全局的还是仅在 Page.ts 内部。我建议提出一个新问题或进行研究。也许这篇文章可以帮助你stackoverflow.com/questions/34072092/…
嘿哈里斯我想获取数组列表中的选定值我是如何获取它的？
我不太确定你在问什么。此外，在 Stackoverflow 上对已经回答的问题提出其他问题也不是很好的做法。可能值得创建另一个问题，以便您可以提供有关该问题的更多详细信息:)

【解决方案2】：

您需要一个模型和一个数组。数组将包含一组将在“选择”中显示的项目。

组件代码如下所示：

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>

希望这会有所帮助。

【讨论】：