Hi guys,
first post here! I’m about ready to tear my hair out with a problem and am hoping someone can help me out a little 
I’m working on a page in which I want to basically add items to a list.
The list consists of key-value pairs, where the key is selected from an ion-select element, and the value comes from an ion-input.
A fab-button allows new items to be added to the list.
This all works fine when the list is in a page, but as soon as I move it to a modal, the behaviour changes completely. The text from the previously selected key and value stays in the “new pair” area and a blank entry is added to the list 
Here’s what I’m working with:
test.page.ts
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { TestComponent } from 'src/app/components/test/test.component';
interface KeyPair {
key: string;
value: string;
}
@Component({
selector: 'app-test',
templateUrl: './test.page.html',
styleUrls: ['./test.page.scss'],
})
export class TestPage implements OnInit {
constructor(private modalController: ModalController) { }
ngOnInit() {
}
async openModal() {
const editArticleModal = await this.modalController.create({
component: TestComponent,
componentProps: {
},
cssClass: 'auto-height'
});
await editArticleModal.present();
}
public pairs: KeyPair[] = [];
keys: string[] = [
'basket'
, 'safety'
, 'construction'
, 'development'
, 'cancer'
]
public kp: any = {};
addData() {
const newVar: KeyPair = { key: this.kp.key, value: this.kp.value }
this.pairs.push(newVar);
this.kp = {};
}
remove(i) {
this.pairs.splice(i, 1);
}
}
test.page.html
<ion-header>
<ion-toolbar>
<ion-title>Home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-button (click)="openModal()">
Open Modal
</ion-button>
<ion-card>
<ion-card-content>
<ion-fab vertical="top" horizontal="end" slot="fixed">
<ion-fab-button (click)="addData()">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-item>
<ion-select placeholder="Select key" [(ngModel)]="kp.key">
<ion-select-option *ngFor="let k of keys">{{k}}</ion-select-option>
</ion-select>
<ion-input [(ngModel)]="kp.value"></ion-input>
</ion-item>
<ion-list>
<ion-item-sliding *ngFor="let p of pairs; let i = index;">
<ion-item>
<ion-label>{{p.key}}</ion-label>
<ion-label>{{p.value}}</ion-label>
<ion-button slot="end" (click)="remove(i)">
<ion-icon name="trash"></ion-icon>
</ion-button>
</ion-item>
</ion-item-sliding>
</ion-list>
</ion-card-content>
</ion-card>
</ion-content>
As I said, the list works fine in the page. But it gets a little weird when the same code is moved to a modal:
test.component.ts
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
interface KeyPair {
key: string;
value: string;
}
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnInit {
constructor(private modalController: ModalController) { }
ngOnInit() { }
public pairs: KeyPair[] = [];
keys: string[] = [
'basket'
, 'safety'
, 'construction'
, 'development'
, 'cancer'
]
public kp: any = {};
addData() {
const newVar: KeyPair = { key: this.kp.key, value: this.kp.value }
this.pairs.push(newVar);
this.kp = {};
}
remove(i) {
this.pairs.splice(i, 1);
}
}
test.component.html
<ion-card>
<ion-card-content>
<ion-fab vertical="top" horizontal="end" slot="fixed">
<ion-fab-button (click)="addData()">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-item>
<ion-select placeholder="Select key" [(ngModel)]="kp.key">
<ion-select-option *ngFor="let k of keys">{{k}}</ion-select-option>
</ion-select>
<ion-input [(ngModel)]="kp.value"></ion-input>
</ion-item>
<ion-list>
<ion-item-sliding *ngFor="let p of pairs; let i = index;">
<ion-item>
<ion-label>{{p.key}}</ion-label>
<ion-label>{{p.value}}</ion-label>
<ion-button slot="end" (click)="remove(i)">
<ion-icon name="trash"></ion-icon>
</ion-button>
</ion-item>
</ion-item-sliding>
</ion-list>
</ion-card-content>
<ion-card>
Has anyone seen this before, or know how I could get the modal list to behave the same as the page list?
Thanks in advance!!
Michael