How can I display the fetched data in my template?

Question

I created a file with the name of product.ts and then I added these codes to it:

export interface Product
{
    id:number;

}

component:

export class AppComponent {
   
  title = 'angpr';

  todo:Product;  

  constructor(public api: ApiService) {

  

  }

 ngOnInit() {
  this.api.getApi()
  .subscribe(    
    data => this.todo=data
  );}


}

after importing the interface and using todo:Product; in the above code, I got this error: Property 'todo' has no initializer and is not definitely assigned in the constructor.

The goal of using interface is displaying the fetched data in my template with using {{todo.id}} .

How can I display the fetched data in my template?

How can I solve this error: Property 'todo' has no initializer and is not definitely assigned in the constructor. ?

Answer 1

将其声明为可选，因为它可以是可选的。

todo?:Product;