Infinite Loop on ngModelChange

Question

我有一个包含用户的列表，我有一个项目，我希望它将我重定向到模态页面。 我的问题是，一旦我的页面可用，我就会无限弹出我的模态，而不是继续我的离子选择并选择项目，以便我可以得到弹出窗口。

.html

<ion-select interface="popover" (ngModelChange)="onChange($event)"> 
<ion-option>Bacon</ion-option>
<ion-option  [value]="openConfig()"></ion-option>Black Olives</ion-option>
<ion-option>Extra Cheese</ion-option>
<ion-option>Mushrooms</ion-option>
<ion-option>Pepperoni</ion-option>
<ion-option>Sausage</ion-option>
</ion-select>

TS

onChange(value: any) {
if (value === 'openConfig') {
this.openConfig()
}
}
openConfig() {
this.modalCtrl.create('ConfigModal').present;
console.log('heeey')
}

Answer 1

在模板中设置[value]实际上是调用您的openConfig()函数，在页面加载时创建一个无限循环。要执行您在此处尝试执行的操作，您根本不需要在模板中引用您的openConfig函数。

ion-select使用输出事件ionChange，该事件输出所选ion-option的值。 因此，在 Ionic 3 中执行此操作的正常方法是这样的：

.html：

<ion-content padding> <ion-select interface="popover" [ngModel]="option" (ionChange)="onChange($event)"> <ion-option>Bacon</ion-option> <ion-option>Black Olives</ion-option> <ion-option>Extra Cheese</ion-option> <ion-option>Mushrooms</ion-option> <ion-option>Pepperoni</ion-option> <ion-option>Sausage</ion-option> </ion-select> </ion-content>

.js：

onChange(value: any) {
if (value === 'Black Olives') {
this.openConfig()
}
}
openConfig() {
this.modalCtrl.create(ConfigModal).present();
}

请注意，ion-option的值只是标签的文本。 所以这就是你应该在你的"onChange"函数中检查的内容。

你还有其他几个不相关的错别字，但我相信这解决了你的无限循环的问题。 希望这有帮助！