any 不能分配给类型参数（响应：响应）=> 任何

Question

在我的平均堆栈项目中，我试图将数据库中的内容显示到我的 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

我无法弄清楚如何显示我数据库中每个玩家的玩家信息。

-

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

我创建了一个服务文件 player.service.ts

在此文件上，我收到一条错误消息： '(response: import("myapp/node_modules/@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，则需要使用 HttpClient 从 @angular/common/http 获取更多详细信息，请查看此 link

最后响应类型就不用说了，我想直接转换成json()就可以了

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

这对你的代码来说很好 - 希望这对你有帮助 - 快乐的编码:)

更新：

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

import { map, pipe } from 'rxjs/operators' import 语句的第一个变化

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

尝试这样的事情以获取更多信息检查this - 希望它有所帮助:)

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>

希望这会有所帮助！