Why is no content displayed when using the Promise method in Angular 4?

Question

JavaScript

Hello.
I have such a problem: the contents of the array passed from the api are not displayed. It is visible in the console but does not display on the screen. Before that, I did not use the Promise method and everything worked.
service

getAllUsers(): Promise<User[]> {
    return this.http.get(this.apiUrl)
                    .toPromise()
                    .then(res => res.json().data as User[])
                    .catch(this.handleError);
  }

component

ngOnInit() {
    this.usersService.getAllUsers().then(users => this.users = users);
  }

component.html

<tr *ngFor="let user of users">
      <td>{{ user._id }}</td>
      <td>{{ user.first_name }}</td>
      <td>{{ user.last_name }}</td>
      <td>{{ user.email }}</td>
    </tr>

user

export class User {
    _id: any;
    first_name: string;
    last_name: string;
    email: string;
}

The array itself obtained from the base

[{"_id":1,"first_name":"Jena","last_name":"Savidge","email":"[email protected]"},{"_id":2,"first_name":"Rheta","last_name":"Dye","email":"[email protected]"}}

There are no errors in the console.
What could be the problem? Thank you.

Answer 1

there is not much point in translating a subscript into a promise. here the problem seems to be, but it is strange that it does not give an error: then(res => res.json().data as User[])
res.json() is needed for rxjs and not for the promise