如何从json响应中访问数据 *项目说明

我试图使用observables从json服务器访问数据，api以以下格式返回响应

{
    "status": "success",
    "data": {
        "players": [
            {
                "id": "1",
                "national_id": "29706242100538",
                "name": "Muhammed",
                "club_id": 1,
                "gov": "Giza",
                "age_level_id": 5,
                "weight": 57,
                "gender": "M"
            },
                        {
                "id": "2",
                "national_id": "29706242100538",
                "name": "Muhammed",
                "club_id": 1,
                "gov": "Giza",
                "age_level_id": 5,
                "weight": 57,
                "gender": "M"
            },
                        {
                "id": "3",
                "national_id": "29706242100538",
                "name": "Muhammed",
                "club_id": 1,
                "gov": "Giza",
                "age_level_id": 5,
                "weight": 57,
                "gender": "M"
            }
        ]
    }
}

我试过的

• 创建了一个名为player的类
• 创建了一个服务，该服务在调用时向服务器发送get请求

问题 这种方法将完整的响应放在“players”变量“status and the data”中，我知道我遗漏了一些东西，但无论我做什么，都会把我带到同一个地方

预期结果 我希望播放器“this.players”只包含json响应中的数据，能够访问html中的“id、name等”值

使用过的库和版本

• 角V:5.1
• 弯曲布局“角度”V:2.00 beta 12
• 角材料V:5.01

---

根据以下响应分配属性播放器

this.playrService.getPlayers().subscribe(response => (this.players = response.data.players), errmess => this.errMess = <any>errmess);

<table>
    <thead>
        <th>Id</th>
        <th>National Id</th>
        <th>Name</th>
    </thead>
    <tbody>
        <tr *ngFor="let player of players">
            <td>{{player.id}}</td>
            <td>{{player.national_id}}</td>
            <td>{{player.name}}</td>
        </tr>
    </tbody>
</table>

this.playrService.getPlayers（）.subscribe（response=>（this.players=response.data.players），errmes=>this.errmes=errmes）；

在html中循环数据，如下所示

this.playrService.getPlayers().subscribe(response => (this.players = response.data.players), errmess => this.errMess = <any>errmess);

<table>
    <thead>
        <th>Id</th>
        <th>National Id</th>
        <th>Name</th>
    </thead>
    <tbody>
        <tr *ngFor="let player of players">
            <td>{{player.id}}</td>
            <td>{{player.national_id}}</td>
            <td>{{player.name}}</td>
        </tr>
    </tbody>
</table>

身份证件
国民身份证
名称
{{player.id}
{{player.national{u id}}
{{player.name}

我认为您需要定义正确的

类型，如下所示：


接口数据响应{
状态：字符串；
数据：{玩家：玩家[]}；
}
感谢您的帮助，它确实有效，但除此之外，我还需要更改服务中的可观测值。
<table>
    <thead>
        <th>Id</th>
        <th>National Id</th>
        <th>Name</th>
    </thead>
    <tbody>
        <tr *ngFor="let player of players">
            <td>{{player.id}}</td>
            <td>{{player.national_id}}</td>
            <td>{{player.name}}</td>
        </tr>
    </tbody>
</table>