I am learning Angular and trying to make an API call but why do I get this error:

error TS2339: Property 'name' does not exist on type 'never'.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  li: any;
  lis = [];
  constructor(private http: HttpClient) {}
  ngOnInit(): void {
    this.http
      .get('http://www.mocky.io/v2/5ea172973100002d001eeada')
      .subscribe((Response) => {
        console.log(Response);
        this.li = Response;
        this.lis = this.li.list;
      });
  }
}

<h1>Title</h1>
<div *ngFor="let e of lis">
  <p>{{ e.name }}</p>
</div>
<router-outlet></router-outlet>

CodePudding user response：

You need to specify the type of the http response:

type Person = { name: string };
type Response = { list: Person[] };

this.http.get<Response>('http://www.mocky.io/v2/5ea172973100002d001eeada')
  .subscribe((response) => {
        console.log(response);
        this.lis = response.list;
      });

CodePudding user response：

You sould try this:

  <p>{{ e?.name }}</p>

I think you try render the property before it received.