I have the following component modal:
@Component({
selector: 'app-custom-table-model',
templateUrl: './custom-table-model.page.html',
styleUrls: ['./custom-table-model.page.scss'],
})
export class CustomTableModelPage implements OnInit {
@Input() userCustomTable: object;
public customTableOptionsArray = [
{"value": "", "title": "Empty"},
{"value": "a", "title": "A"},
{"value": "b", "title": "B"},
{"value": "c", "title": "C"},
{"value": "d", "title": "D"},
{"value": "e", "title": "E"},
{"value": "f", "title": "F"},
{"value": "g", "title": "G"},
{"value": "h", "title": "H"},
{"value": "i", "title": "I"},
{"value": "j", "title": "J"},
{"value": "k", "title": "K"},
{"value": "l", "title": "L"},
{"value": "m", "title": "M"},
{"value": "n", "title": "N"},
];
// 30 Col in the table ex the fixed date col
public numbersArray = Array.from(Array(29), (_, x) => x);
constructor(
private modalController: ModalController,
) {
}
ngOnInit() {
}
async closeModel() {
await this.modalController.dismiss(JSON.stringify(this.userCustomTable));
}
}
and the following HTML:
<ion-header translucent>
<ion-toolbar>
<ion-title class="white-text" style="color: white">Custom Table Layout</ion-title>
<ion-buttons style="color: white" slot="end">
<ion-button style="color: white" (click)="closeModel()">Ok</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list style="padding-top: 0; padding-bottom: 0">
<ion-item>
<ion-label position="stacked">Col 1: Date - Fixed</ion-label>
</ion-item>
<ion-item *ngFor="let colNumber of numbersArray">
<ion-label position="stacked">Col {{colNumber + 2}}:</ion-label>
<ion-select [(ngModel)]="userCustomTable[colNumber + 1]">
<ion-select-option
*ngFor="let customOption of customTableOptionsArray"
[value]="customOption.value">{{customOption.title}}</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</ion-content>
How the modal is called from page.ts:
async openCustomTableModel() {
const modal = await this.modalController.create({
component: CustomTableModelPage,
componentProps: {
userCustomTable: JSON.parse(this.item.customTableStructure)
}
});
modal.onDidDismiss().then((modelData) => {
if (modelData !== null) {
this.item.customTableStructure = modelData.data;
}
});
return await modal.present();
}
The problem I am having is when I try to select another option in the select it just closes the entire model. Then when I try to reopen the modal I get the following error:
Line 2288 - Msg: ERROR Error: Uncaught (in promise): SyntaxError: Unexpected token u in JSON at position 0 SyntaxError: Unexpected token u in JSON at position 0
Wondering what could be the issue/ fix
example of userCustomTable object:
{"1":"a","2":"c","3":"d","4":"s","5":"f"
...."30": ""
}