ionic 2 从 json 填充选择选项

我正在尝试动态填充ion-select带有 json 对象的下拉列表。

我的 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'}]
};

The [selectOptions]用于传递创建选项（docs http://ionicframework.com/docs/api/components/select/Select/#input-properties）。所以你应该从你的 json-object 中创建一个可迭代对象并使用*ngFor.

*ngFor例子：

访问对象键和值的一种巧妙方法是利用Object.keys如建议的this https://stackoverflow.com/a/42813708/1783706答案并如下所示。

@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>
...

这样就不需要实现基本上做同样事情的自定义管道。