Angular 和 Ionic-v4 离子选择弹出窗口不起作用

Question

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

@ViewChild('selectNotificationList') selectNotificationList: IonSelect;

打开离子选择的方法是：

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

单击该按钮会打开带有 interface="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);
}

...弹出窗口如预期的那样出现在鼠标旁边。