typescript 如何使离子图标具有离子选择的保存行为?

wztqucjr  于 2023-08-07  发布在  TypeScript
关注(0)|答案(1)|浏览(118)

我有这样的代码:

<ion-col  class="settings ion-text-end">
            <ion-icon name="pricetags-outline" size="small" (click)="headerService.openSelect()"></ion-icon>
            <ion-select style="display: none;" interface="popover" fill="none" *ngIf="!headerService.noPShops && headerService.showSearch() && headerService.selectVisible"
              (ionFocus)="headerService.updateShops()" [(ngModel)]="headerService.selectedPShop"
              id="selectPhysical">
              <ion-select-option *ngFor="let shop of headerService.pshops" [value]="shop.url">{{shop.name}}</ion-select-option>
            </ion-select>
            <ion-select-option *ngFor="let shop of headerService.pshops" [value]="shop.url">{{shop.name}}</ion-select-option>
            <ion-icon (click)="headerService.changeMenu()" name="settings-sharp" size="small" title="Configuración"></ion-icon>
          </ion-col>

字符串
我需要让离子图标像离子选择一样工作。或者至少,使ion选择与ion图标具有相同的设计。“
尝试使离子选择显示为无,但...离子选择选项没有出现。
有办法吗?

1wnzp6jl

1wnzp6jl1#

要实现与ion-iconion-select类似的行为,可以使用ion-popover在单击图标时显示选项。以下是您的操作方法:
1.创建将显示以下选项的弹出框组件:
popover-component.ts:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-popover',
  template: `
    <ion-list>
      <ion-item *ngFor="let shop of pshops" (click)="selectShop(shop.url)">
        {{ shop.name }}
      </ion-item>
    </ion-list>
  `,
})
export class PopoverComponent {
  @Input() pshops: any[];

  selectShop(shopUrl: string) {
    // Implement the logic to handle the selected shop here
    console.log(shopUrl);
  }
}

字符串
1.将弹出框组件添加到应用模块:
app.module.ts:

import { PopoverComponent } from './popover-component';

@NgModule({
  // ... other imports and declarations
  declarations: [PopoverComponent],
  entryComponents: [PopoverComponent], // Add this line
})
export class AppModule {}


1.在主组件中,单击图标时打开弹出框:
main-component.ts:

import { PopoverController } from '@ionic/angular';
import { PopoverComponent } from './popover-component';

@Component({
  selector: 'app-main',
  template: `
    <!-- Your other template code -->

    <ion-col class="settings ion-text-end">
      <ion-icon name="pricetags-outline" size="small" (click)="openPopover($event)"></ion-icon>
      <ion-icon (click)="headerService.changeMenu()" name="settings-sharp" size="small" title="Configuración"></ion-icon>
    </ion-col>
  `,
})
export class MainComponent {
  constructor(private popoverController: PopoverController) {}

  async openPopover(event: Event) {
    const popover = await this.popoverController.create({
      component: PopoverComponent,
      event,
      translucent: true,
      componentProps: {
        pshops: headerService.pshops,
      },
    });
    await popover.present();
  }
}


使用此设置,当单击ion-icon时,将显示一个弹出框,其中包含来自ion-select的选项。当用户从弹出框中选择一个选项时,PopoverComponent中的selectShop()方法将被调用,您可以在那里实现处理所选商店的逻辑。

相关问题