any 不可分配给类型参数(响应：响应)=> any

Question

在我的mean stack项目中，我试图将数据库中的内容显示在html页面上的表上。

这是我在mlab:上制作的数据库中的一个样本记录

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

这些信息应该显示在我的表格中，如下所示：

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

我不知道如何显示我数据库中每个球员的球员信息。

-

-到目前为止，我所做的工作是：

我创建了一个服务文件播放器.service.ts

在这个文件上，我得到一个错误，上面写着：类型为'(response:import("myapp/nod_module/@angular/http/src/static_response"(的参数。Response(=>any'不可分配给类型为"(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
}
}

-

-在我的player.component.ts文件中，一切都运行得很顺利：

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

关于player.service.ts上出现错误的原因有什么想法吗？？还有一些关于如何让我的所有玩家进入我的html页面的表格的帮助将是非常棒的！感谢

Answer 1

在第一种情况下，您使用的是不推荐使用的http版本。如果您升级您的angular，则需要使用@angular/common/http中的HttpClient以获取更多详细信息，请查看此链接

最后，无需提及响应类型，您可以直接将其转换为json()，就像我认为的一样

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

这将是很好的工作你的代码-希望这能帮助你-快乐的编码：(

更新：

对于rxjs6+，您需要以不同的方式使用运算符

import { map, pipe } from 'rxjs/operators'导入语句中的首次更改

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

尝试这样的东西来获取更多信息检查这个-希望它有帮助：(

Answer 2

您需要在app.module中导入HttpClientModule来解决错误'NullInjectorError:No provider for Http！'

export class AppModule {
imports: [
HttpClientModule
]
}

你可以试试你的服务，比如：(你不需要解析成json(

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

然后，在您的模板中：

<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>

希望这能有所帮助！