离子 2 从 json 填充选择选项答案

【问题标题】：ionic 2 Populate Select Options from json离子 2 从 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}}&nbsp;</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'}]
};

【问题讨论】：

标签： javascript angular typescript ionic-framework

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

【讨论】：