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

虽然单击按钮会打开带有界面=“ 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);
}

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