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对象中创建一个可迭代的并使用*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(){} }，如下所示。

...  
    <ion-select [(ngModel)]="value" [required]="true" [name]="value">
        <ion-option *ngFor="let option of objectKeys(value)">
            {{ value[option] }}
        </ion-option>
    </ion-select>
...

<强> HTML

#import <SharkORM.h>

@class DLRSSGroup;
@class DLUser;


@interface DLRSS : SRKObject

@property NSString *r_id;

//RSS的名称
@property NSString *r_name;

//RSS的描述
@property NSString *r_discrip;

//RSS的图标
@property NSString *r_iconUrl;

//RSS的订阅链接
@property NSString *r_feedUrl;

//RSS的访问链接
@property NSString *r_linkUrl;

//RSS的开关
@property BOOL r_open;

//外键，DLRSSGroup的id
@property DLRSSGroup *rg_id_fk;

//外键，RSS的作者id
@property DLUser *u_id_fk;


@end

这样就没有必要实现一个基本上做同样事情的自定义管道。

Answer 2

你或许试过......

09121269001

ionic 2填充从json中选择选项

2 个答案: