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'的参数。 / p>

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

您需要在app.module中导入HttpClientModule来解决错误“ NullInjectorError：没有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>

希望这会有所帮助！

Answer 2

在第一种情况下，您使用的是http的过时版本，如果要升级角度，则需要使用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'导入语句的第一次更改

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

尝试类似这样的方法以获取更多信息，请检查this-希望它会有所帮助：）

any不可分配给类型的参数（响应：Response）=> any

-

-

2 个答案: