带有操作表界面 (Ionic2) 的离子选择上的自定义图标

Question

我的应用程序上有<ion-select>。如下：

<ion-item>
    <ion-label>Select Example</ion-label>
    <ion-select [(ngModel)]="value" (ngModelChange)="updateSelectExample($event)" interface="action-sheet">
        <ion-option *ngFor="let option of options;let index = index" [value]="index">{{option.name}}</ion-option>
    </ion-select>
</ion-item>

选择的内容来自一个 JSON，其中我有 3 个属性：

{
 "name": "Random1",
 "type": "Any1",
 "icon": "../assets/icon1"
},
{
 "name": "Random2",
 "type": "Any2",
 "icon": "../assets/icon2"
},
...

我希望我的选择使用我带来的选项加载操作表，但也在侧面显示尊重的图标。

我无法让它工作。离子文档告诉我我可以放一个

[selectOptions]="selectOptions"

在我选择"控制"操作表时，但我无法将选项与其图标相关联。

有没有办法做到这一点，或者我应该用按钮替换选择并以正常方式创建操作表，如下所示：

let actionSheet = this.actionSheetController.create({
      title: 'Test',
      buttons: [
        {
          text: 'Test 1',
          icon: 'check'
        },
        {
          text: 'Test 2',
          icon: 'close'
        }]
    });

Answer 1

从离子 4 中的组件动态操作表

  openApplicationSheet(): void {
    this.applicationService
      .getApplicationsOfAccount(accountId)
      .subscribe((data: ApplicationInterface) => {
        this.applicationActionSheet(data["docs"]);
      });
  }
  async applicationActionSheet(applications) {
    let actionSheet = await this.actionSheetController.create({
      header: "Dummy Heder",
      translucent:true,
      buttons: this.buttons(applications)
    });
    await actionSheet.present();
  }
  buttons(applications) {
    let buttons = [];
    for (let btn of applications) {
      let button = {
        text: btn.name,
        handler: () => {
          console.log(btn);
          return true;
        }
      };
      buttons.push(button);
    }
    return buttons;
  }

   <ion-item>
        <ion-label>{{application.name}}</ion-label>
          <ion-button round fill="outline"
            (click)="openApplicationSheet()">
              Change
            </ion-button>
          </ion-item>

Answer 2

我可以仅使用ActionSheet控件使其工作。发布此方法是因为它适合我。我更喜欢选择。认为它更优雅，但那会很好！

选择组件 TS

export class SelectComponent {//In this example not a select anymore xD
public updatedOption: Option = new Option();
private updateSelectedOption(option: Option): void{
    this.updatedOption = option;
}
public presentActionSheet(): void {
    let options: Option[] = this.options as Option[];
    //On my code this.options come from a JSON as Object so I cast it for Option array
    let actionSheet = this.actionSheetCtrl.create({
        title: 'Action Sheet'
    });    
    for (let i = 0; i < types.length; i++) {
        actionSheet.addButton({
            text: options[i].name, 
            cssClass: options[i].css,
            icon: options[i].image,
            handler: () => {
                this.updateSelectedOption(options[i]);
            }
        });
    }
    actionSheet.addButton({text: 'Cancel', 'role': 'cancel' });       
    actionSheet.present(); 
}
}

选择组件 HTML

<button ion-button icon-start (click)="presentActionSheet()">
    <ion-icon name="{{updatedOption.icon}}"></ion-icon>{{updatedOption.name}}
</button>