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>

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

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

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

我不能让它发挥作用。 Ionic文档告诉我可以放一个

[selectOptions]="selectOptions"

在我选择“控制”动作表时，但我没有将选项与其图标联系起来。

有没有办法做到这一点，或者我应该用Button替换select并以正常方式创建Action Sheet：

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

Answer 1

操作表从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>

Answer 2

我只能使用ActionSheet控件来制作它。发布这种方法，因为它适合我。我更喜欢选择。认为它更优雅，但这样做会很好！

SELECT COMPONENT 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>

Ionic上的自定义图标选择ActionSheet接口（Ionic2）

2 个答案: