Why can't I display the list of products in the client although I have them in the database and in the Network tab in the console

Question

so basically I want to display products in the Client. Im using Angular 12 and for backend .NET 5. I'm getting products from products controller and I can't see them, however I can see "welcome" title moreover I have products in the Database. In network tab I can see list of products and I don't have any errors. What I'm doing wrong? Any suggestions? I did some coding:

export class ListsComponent implements OnInit {
products: any[];

constructor(private http: HttpClient) { }

ngOnInit(): void {
this.http.get('https://localhost:6001/api/products').subscribe((response:any) => {
  this.products = response.data;
}, error => {
  console.log(error);
});
}
}

And my HTML code

<div class="container" style="margin-top: 140px">
<h1>welcome</h1> <!-- I can see it -->
<ul>
    <li class="list-unstyled" *ngFor="let product of products"><!-- I cant see any of this -->
        {{product.name}}
    </li>
</ul>

Answer 1

this.http.get('https://localhost:6001/api/products').subscribe((response:any) => {
 this.products = response;
}, error => {
 console.log(error);
});

It seems like in your backend you return something named data and you think you need to access it in the front , you http response is an array , you don't need to use response.data .