I am new to angular and currently working on an application that allows users to take notes and store them in a database.
However, I have encountered a problem during the note addition process. When there are no existing notes in the database and I add two new notes, both notes appear the same on the user interface despite being different in the database.
https://i.sstatic.net/tXYd2.jpg
Upon further investigation, I noticed that the data retrieved from the database is in JSON format. After adding new data, the array of notes is displayed as -
0: {}
1: {}
2: Note{}
3: Note{}
NoteService -
export class NotesService {
private baseURL = 'http://localhost:8082/api/v1/note';
notes: Note[];
notesSubject: BehaviorSubject<Note[]>;
constructor(private http: HttpClient) {
this.notes = [];
this.notesSubject = new BehaviorSubject<Note[]>([]);
}
// More code follows here...
NoteTakerComponent : addNote() -
addNote(): void {
// Code for adding notes goes here
}
NoteTaker view -
<!-- Code for viewing and adding new notes -->
// HTML code for displaying the form to add notes.
NoteView Component -
// TypeScript code for displaying the added notes.
export class NoteViewComponent implements OnInit {
// Code for retrieving and displaying notes goes here
}
The goal is to display newly added notes along with previously existing notes seamlessly.