离子 2 从 json 填充选择选项
Posted
技术标签:
【中文标题】离子 2 从 json 填充选择选项【英文标题】:ionic 2 Populate Select Options from json 【发布时间】:2017-12-28 14:12:50 【问题描述】:我正在尝试使用 json 对象动态填充 ion-select
下拉列表。
我的 html 组件如下所示:
<ion-item [hidden]="editOptions.isEditing">
<ion-note stacked color="primary">label</ion-note>
<ion-note class="inline-edit"> value </ion-note>
</ion-item>
<ion-item [hidden]="!editOptions.isEditing">
<ion-label stacked color="primary">label</ion-label>
<ion-select [(ngModel)]="value" [selectOptions]="additionalData" [required]="required" [name]="value">
<!--<ion-option>None</ion-option>-->
</ion-select>
</ion-item>
在我的调用代码中,我尝试填充选择选项,但它们在文档中没有示例
additionalData =
title: 'Pizza Toppings',
subTitle: 'Select your toppings',
mode: 'md'
;
如何在不使用 html 中的 *ngFor 的情况下将我的选项添加到此选择中? 我宁愿像这样传递它们:
additionalData =
title: 'Pizza Toppings',
subTitle: 'Select your toppings',
mode: 'md'
options: [id:1, description:'Pepperoni']
;
【问题讨论】:
【参考方案1】:[selectOptions]
用于传递创建选项 (docs)。所以你应该从你的 json 对象中创建一个可迭代对象并使用 *ngFor
。
*ngFor
示例:
访问对象键和值的一种简洁方法是使用Object.keys
,正如this 答案中所建议的那样,如下所示。
@Component(
selector: 'my-page',
templateURL: 'my-page.html
)
export class MyPage
// Make Object.keys available
objectKeys = Object.keys;
value = option1: 'foo', option2: 'bar' ;
constructor()
HTML
...
<ion-select [(ngModel)]="value" [required]="true" [name]="value">
<ion-option *ngFor="let option of objectKeys(value)">
value[option]
</ion-option>
</ion-select>
...
这样就不需要实现一个基本上做同样事情的自定义管道。
【讨论】:
是的..只需向上滚动一点即可进入示例.. - 具有讽刺意味的是,就在 @jonny5 得到关于披萨的 sn-p 的下方... @JGFMK 这并不讽刺,因为如果您阅读我不想使用 *ngFor 的问题,我只想将值传递给选择并让它自动填充 另外,如果你们中的任何一个投反对票,请解释原因 不,我没有否决这个问题。我真的不认为有另一种方法来完成你想要的。并非没有付出很多不必要的努力。不想使用*ngFor
的原因是什么?
是的,我只是在检查我认为不是,但如果是,我想知道为什么。我想既然不能穿那么我必须这样做我真正想要的是<ion-select [selectOptions]='options' [selectValues]='values'></ion-select>
【参考方案2】:
你有没有试过...
<ion-select [selectOptions]="
title: 'Pizza Toppings',
subTitle: 'Select your toppings',
mode: 'md'
">
</ion-select>
【讨论】:
以上是关于离子 2 从 json 填充选择选项的主要内容,如果未能解决你的问题,请参考以下文章
使用带有 Json 数据的 Javascript/Jquery 在单击时填充选择框选项