Property 'name' does not exist on type 'never'

Question

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>

`lis = []` has an inferred type of `never[]`, i.e. an array that's _always_ empty. You're using TypeScript, so _use TypeScript_ - specify the properties' types and the expected response payload type, so the compiler can actually help you. — jonrsharpe, Jul 07 '22 at 08:44
You can reference the name in the template as `e["name"]` without any errors. — , Jul 25 '23 at 05:06

wlf · Answer 1 · 2022-07-07T11:17:11.443

1

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;
      });

edited Jul 07 '22 at 11:17

answered Jul 07 '22 at 11:12

wlf

3,086
1
19
29

score 0 · Answer 2 · answered Jul 07 '22 at 12:04

0

You sould try this:

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

I think you try render the property before it received.

answered Jul 07 '22 at 12:04

mullern

58
4

Still not working with ? . – Najam Us Saqib Jan 10 '23 at 09:16
1

Not downvoting the answer because it can be helpful to someone else: the use of the '?' operator above is used when you know what kind of object you are expecting, but you are not 100% sure that the object itself will arrive. In the case above, placing the '?' after 'e' will make it so that if the object is undefined, the runtime won't crash or show errors of the type 'Cannot read property 'name' of undefined'. This operator, however, doesn't fit the case provided by the poster of the question, which is about variable typings. – JurgenBlitz Feb 02 '23 at 10:53

Property 'name' does not exist on type 'never'

2 Answers2