Angular 和 Ionic-v4 ion-select 弹出框不工作

Question

我想用弹出窗口模式以编程方式打开 ionSelect。

@ViewChild('selectNotificationList') selectNotificationList: IonSelect;

打开离子的方法-select是：

clickNotificationNumber() {
    this.selectNotificationList.interface = 'popover';
    this.selectNotificationList.open();
}

HTML是：

<ion-card slot="end" class="langCard">
    <ion-card-content>
        <ion-select interface ="popover"  (ionChange)="readNotification($event)" #selectNotificationList>
            <ion-select-option *ngFor="let message of notificationList let notificationIndex = index"  value="{{message.id}}">
                {{message.notificationOptions.body}}</ion-select-option>
        </ion-select>
    </ion-card-content>
</ion-card>

Answer 1

tl;tr 您的方法有效，只需传递鼠标事件即可获取弹出窗口而不是警报。
（使用 Angular 6.1.7 和 Ionic 4.7.4 测试）

我构建了一个小的模拟应用程序来测试这个：https://stackblitz.com/edit/ionic-v4-fhcnzr

点击按钮打开 select 界面="alert" 但是...

原来，控制台会告诉你一切：

Select interface cannot be a "popover" without passing an event. 
Using the "alert" interface instead

从按钮传递点击事件后...

clickNotificationNumber(event: MouseEvent) {
    this.selectNotificationList.interface = 'popover';
    this.selectNotificationList.open(event);
}

...弹出窗口按预期出现在鼠标旁边。

Angular 和 Ionic-v4 ion-select 弹出框不工作

Angular and Ionic-v4 ion-select popover is not working

ionic-framework

ionic2

angular

ionic4