Angular 9：在 GUI 上列出用户详细信息答案

【问题标题】：Angular 9 : List user details on GUIAngular 9：在 GUI 上列出用户详细信息
【发布时间】：2020-06-12 17:35:32
【问题描述】：

我想使用 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>

【问题讨论】：

当你尝试调试这个时发生了什么？
尝试让users.result的用户。

标签： angular angular-ui angular9

【解决方案1】：

尝试将您的 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>

【讨论】：