While following a tutorial on this website, I encountered my first issue in the file todo.service.ts:
An error stating "Property 'key' does not exist on type 'Todo'" was displayed.
Below is the interface code for todo.ts:
export interface Todo {
title:string;
note:string;
completed:boolean;
}
Here is the code for todo.service.ts:
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { Todo } from './todo';
@Injectable({
providedIn: 'root'
})
export class TodoService {
...
The issue I faced was in the update method in todo.service.ts where the 'key' parameter was missing from the interface. Adding key:string to the todo.ts interface resolved the error.
After updating the interface as follows:
export interface Todo {
key:string;
title:string;
note:string;
completed:boolean;
}
I made corresponding changes to the createTodo() method in home.page.ts as well. The home.page.html remains unchanged as per the tutorial.
Upon running the program with ionic serve, the home page UI did not appear. Navigating to other pages like about worked fine, but home redirected to a blank page. Any insights on what could be causing this issue would be greatly appreciated.
[UPDATE]:
After tweaking the constructor in home.page.ts, the UI started to show up but the todo list was still not displaying. Earlier constructor code:
export class HomePage {
public todos: Array<Todo> = [];
constructor(public todoService: TodoService){}
...
...
...
}
Updated constructor code:
export class HomePage {
public todos: Array<Todo> = [];
public todoService: TodoService;
constructor(){}
...
...
...
}
By removing public todoService: TodoService from the constructor parameters and placing it outside the constructor, the UI showed up but the todos list was still missing. Any suggestions to resolve this issue would be highly valued.