ionic 2從json填充選擇選項

Question

我正在嘗試使用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'}]
};

Answer 1

[selectOptions]用於傳遞創建選項（ docs ）。 因此，您應該從json-object中進行迭代，並使用*ngFor 。

*ngFor例如：

訪問對象鍵和值的一種巧妙方法是使用Object.keys如本答案中所建議的那樣，如下所示。

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

這樣一來，就無需實現基本完成相同功能的自定義管道。

Answer 2

您是否嘗試過...

<ion-select [selectOptions]="{
  title: 'Pizza Toppings',
  subTitle: 'Select your toppings',
  mode: 'md'
   }">
</ion-select>