Hi, I am fairly new at angular and ionic 5. I was testing out some mobile development and for some reason, home page is not getting updated with latest valued stored in local storage. Any help is greatly appreciated.
in short, flow is home or folder page (by defualt from ionic) has add button -> takes you to notepage where you can enter headername etc. -> which gets saved in local storage via service. When I am calling service to get latest to show all the notes, nothing is showing up.
please find the code below for your reference in link or pasted below:
Again, thank you for any help!!
https://drive.google.com/drive/folders/19uQnMDSAq4C23PxTMLc4GhS2NdmbFe2J?usp=sharing
Code:
folder.page.ts:
export class FolderPage implements OnInit {
public folder: string;
public noteList: NotePageComponent;
ngOnInit() {
this.folder = this.activatedRoute.snapshot.paramMap.get(‘id’);
console.log(‘folderpage ngOnInit’);
this.localStorage.read().then(data => {
this.noteList = data;
console.log('folderpage ngOnInit 2: ' + this.noteList);
});
}
addButtonClick()
{
this.router.navigate([’/note-page’]);
}
Note.page.ts:
export class NotePageComponent implements OnInit {
public headerName = ‘’;
public text = ‘’;
public lastSavedTime = new Date();
private editMode = false;
noteList = ;
constructor(private localStorage: LocalStorageService,
private router: Router,
private activatedRoute: ActivatedRoute) {
}
ngOnInit() {
console.log(‘notepage ngOnInit’);
if (this.activatedRoute.snapshot.paramMap.get(‘name’)) {
console.log('NotePageComponent: ', this.activatedRoute.snapshot.paramMap.get(‘name’));
const noteHeaderName = this.activatedRoute.snapshot.paramMap.get(‘name’);
if (noteHeaderName) {
const note = this.localStorage.getSpecificNote(noteHeaderName).then(data => data = note);
this.headerName = note.headerName;
this.text = note.text;
this.editMode = true;
}
}
}
okClick() {
console.log(‘okClick’);
if (!this.editMode) {
console.log(‘okClick non-editMode’);
this.localStorage.addNotePageToList(this);
this.localStorage.read().then(data => {
this.noteList = data;
this.router.navigate([’’]);
console.log(‘okClick 2: ’ + this.noteList);
});
}
else {
console.log(‘okClick editMode’);
this.localStorage.updateNotePageToList(this);
this.editMode = false;
this.router.navigate([’’]);
}
}
local-storage.service.ts:
@Injectable({
providedIn: ‘root’
})
export class LocalStorageService {
private noteId = 1;
constructor(private storage: Storage) { }
public addNotePageToList(notePage: NotePageComponent)
{
const item = { headerName: notePage.headerName, lastSavedTime: notePage.lastSavedTime, text: notePage.text };
console.log(’***inside addNotePageToList’, notePage);
this.noteId = this.noteId + 1;
return this.storage.set(this.noteId.toString(), JSON.stringify(item));
}
public read(): Promise<NotePageComponent>{
console.log('** inside read');
const notes: Array<NotePageComponent> = [];
return new Promise(resolve => {
this.storage.forEach(data => {
console.log('***inside foreach', data);
notes.push(JSON.parse(data));
});
return resolve(notes);
});
}