any is not assignable to parameter of type (response: Response) => any

Question

On my mean stack project I am trying to display the contents within my database onto a table on my html page.

Here is a sample record from my database i made on mlab:

{
    "_id": {
        "$oid": "5befa2ad59ef330bc8568373"
    },
    "player": "loco",
    "rank": 1,
    "score": 200,
    "time": "1d 2hrs",
    "gamesPlayed": "League",
    "status": "online",
    "__v": 0
}

This information should be displayed in my table like this:

Player.component.html:

<tr>
<td>Player</td>
<td>Rank</td>
<td>Score</td>
<td>Time</td>
<td>Games Played</td>
<td>Status</td>
</tr>
<tr>
<td>{{player.name}}</td>
<td>{{player.rank}}</td>
<td>{{player.score}}</td>
<td>{{player.time}}</td>
<td>{{player.gamesPlayed}}</td>
<td>{{player.status}}</td>
</tr>                          //For each player create new row on table displaying player info

Im unable to figure out how to display player info for every player i have on my database.

-

- The work i have done so far is this:

I created a service file player.service.ts

On this file im getting an error that says: Argument of type '(response: import("myapp/node_modules/@angular/http/src/static_response").Response) => any' is not assignable to parameter of type '(response: Response) => any'.

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable({
  providedIn: 'root'
})
export class PlayerService {

  private _getUrl = "/api/players";

  constructor(private _http: Http) { }  //instance of http to make requests

  getPlayers()
  {
    return this._http.get(this._getUrl)           //call get method passing the url and fetch all players
    .map((response: Response)=> response.json());  //response is mapped to json
  }
}

-

- On my player.component.ts file everything is running smoothly:

import { Component, OnInit } from '@angular/core';
import { Player } from '../player';
import { PlayerService } from '../player.service';

@Component({
  selector: 'app-player-center',
  templateUrl: './player-center.component.html',
  styleUrls: ['./player-center.component.css'],
  providers: [PlayerService]
})
export class PlayerCenterComponent implements OnInit {

  players: Array<Player>; //players is array of type player

  selectedPlayer: Player;

  constructor(private _playerService: PlayerService) { }  //dependancy injection to get playerservice

  ngOnInit() 
  {
    this._playerService.getPlayers()
    .subscribe(resPlayerData => this.players = resPlayerData);
  }

  onSelectPlayer(player:any)
  {
    this.selectedPlayer = player;
    console.log(this.selectedPlayer);
  }

}

Any ideas on what is causing the error on player.service.ts?? And some help on how I can get all my players into the table on my html page would be great! Thanks

Answer 1

You need to import HttpClientModule In app.module to resolve the Error 'NullInjectorError: No provider for Http!'

export class AppModule {
   imports: [
     HttpClientModule
   ]
}

You could try your service like : (you dont need to parse to json)

getPlayers(): Observable<any> {
    return this._http.get(this._getUrl);
}

Then, in your template :

  <tr *ngFor="let player of players">
    <td>{{player.name}}</td>
    <td>{{player.rank}}</td>
    <td>{{player.score}}</td>
    <td>{{player.time}}</td>
    <td>{{player.gamesPlayed}}</td>
    <td>{{player.status}}</td>
 </tr>

Hope this helps!

Answer 2

On first case you are using a deprecated version of http if in case you upgrade your angular you need to use HttpClient from @angular/common/http for more details check this link

Finally there is no need of mentioning the response type you can directly convert it as json() as my thought

getPlayers()
{
  return this._http.get(this._getUrl)           
    .map((response)=> response.json()); 
}

This will be fine to work your code - hope this helps you - happy coding :)

Update:

For rxjs 6+ you need to use the operators in different manner

import { map, pipe } from 'rxjs/operators' first change in import statement

getPlayers() : Observable<Players[]>
    {
      return this._http.get(this._getUrl)
       .pipe(map((response)=> response.data)); 
    }

Try something like this for more info check this - hope it helps :)