@jusliong wrote:
Hi, I am new to Ionic and Angular (web programming generally) so I may be very poorly informed about some more advanced stuff like JSON, HTTP, etc.
I have a TS file with an object array infoElements, which has property ‘name’, I intend to add more to it, but to keep it simple lets just go with one property in each object. There are two objects in infoElements.
My page TS file:
export class Tab2Page { newName = ''; name = ''; infoElements = [{name: 'Justin'}, {name:'Alfredo'}] updateInfo(value:string){ this.newName = value; } onSubmit(){ this.infoElements.push({name: this.newName}); }The updateInfo(string) is for user input, such that the input will be saved to the variable newName
The onSubmit() is bind to a button to push a new object into the array infoElements, and afterwards displayed on the page.My page HTML file:
<ion-content> <div style="max-width: 30%; left: 3%; position: relative;"> <ion-item> <ion-label position="floating">Name</ion-label> <ion-input (keyup)="updateInfo($event)"></ion-input> </ion-item><br> <ion-button color="primary" (click)="onSubmit()">Submit</ion-button> </div> <div style="position:relative; left: 3%; max-width: 30%;" *ngFor="let infoElement of infoElements"> {{ infoElement.name }} </div> <div style="left: 2%; position:relative;"> </div> </ion-content>However, the names that are properly printed are only ‘Justin’ and ‘Alfredo’
any other subsequent name inputs shows ‘[object KeyboardEvent]’ after clicking the Submit button.I have tried searching for solutions online, like using {{ infoElement?.name }} and JSON.stringify() but no avail.
Posts: 1
Participants: 1
