带有 ActionSheet 界面 (Ionic2) 的 Ionic Select 上的自定义图标答案

【问题标题】：Custom Icons on Ionic Select with ActionSheet Interface (Ionic2)带有 ActionSheet 界面 (Ionic2) 的 Ionic Select 上的自定义图标
【发布时间】：2018-06-16 10:10:09
【问题描述】：

我的应用上有一个<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>

选择的内容来自我有 3 个属性的 JSON：

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

我希望我的选择能够加载带有我带来的选项的操作表，同时在侧面显示相应的图标。

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

[selectOptions]="selectOptions"

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

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

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

【问题讨论】：

标签： ionic-framework ionic2

【解决方案1】：

我可以仅使用 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>

【讨论】：

【解决方案2】：

从 ionic 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>

【讨论】：