首页 > 解决方案 > Angular 9:在 GUI 上列出用户详细信息

问题描述

我想列出使用 Angular 在页面上注册的用户。

API 响应:

{
  "message": "User list is fetched successfully",
  "result": [
    {
      "firstName": "xcvbn",
      "lastName": "fvbnm",
      "domain": "hgj"
    },
    {
      "firstName": "wdD",
      "lastName": "DWQ",
      "domain": "hDWgj"
    },
    {
      "firstName": "GH",
      "lastName": "J",
      "domain": "RF"
    },
    {
      "firstName": "D",
      "lastName": "F",
      "domain": "K"
    }
  ],
  "status": true,
  "responseCode": "200"
}

我能够获得 API 响应,但无法在 UI 上显示列表。这是我为列出用户列表而创建的 component.html 类

**component.html**

    <div class="container">
    <div class="container">
    <div class="container">
        <div class="row col-md-6 col-md-offset-2 custyle">
        <table class="table table-striped custab">
        <thead>
            <tr>
                <th>Frist Name</th>
                <th>Last name</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let user of users">
                <td>{{user.firstName}}</td>
                <td>{{user.lastName}}</td>
              </tr>
        </tbody>
        </table>
        </div>
    </div>

标签: angularangular-uiangular9

解决方案


尝试将您的 html 更改为

<div class="container">
    <div class="container">
    <div class="container">
        <div class="row col-md-6 col-md-offset-2 custyle">
        <table class="table table-striped custab">
        <thead>
            <tr>
                <th>Frist Name</th>
                <th>Last name</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let user of users.result">
                <td>{{user.firstName}}</td>
                <td>{{user.lastName}}</td>
              </tr>
        </tbody>
        </table>
        </div>
    </div>

推荐阅读