在通过ngFor

Question

我对angular不熟悉，我正在调用rest api并成功返回响应，但是我无法通过html文件中的ngFor迭代该响应。

这是我的component.ts文件

import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/reg.service';

@Component({
    selector: '<app-users>',
    templateUrl: 'users.component.html'
})
export class UsersComponent implements OnInit {


    users: any = {};
    constructor(
        private userService: UserService
        ) { }

        ngOnInit() {
            this.userService.getUserList().subscribe(

            data => {
                this.users = data['data'];

                    // data is in below structure
                   /* {
                    status: "Data found",
                    data: {
                         1: {
                             id: "1",
                             username: "aksahy",
                             gender: "male"
                            },
                         2: {
                             id: "2",
                             username: "anand",
                             gender: "male"
                            }
                         }
                    } */
                console.log(this.users);
            },
            error => {
                console.log(error);
            }
        );
    }
}

这是我的component.html文件。

<div class="container">

    <li *ngFor='let userlist of users'>
            {{ userlist.gender}}

    </li>
</div>

Answer 1

只需添加此行

this.users = Object.values(data['data']); // remove this.users = data['data'];

原因：您有对象的对象，但是*ngFor接受对象的数组。

Answer 2

您显示的数据结构是object个对象

data: {
      1: {
        id: "1",
          username: "aksahy",
            gender: "male"
      },
      2: {
        id: "2",
          username: "anand",
            gender: "male"
      }
    }

要进行迭代，它应该是对象的array。像这样：

data: [
  1: {
    id: "1",
    username: "aksahy",
    gender: "male"
  },
  2: {
    id: "2",
    username: "anand",
    gender: "male"
  }
]

您需要以array格式修改响应

Answer 3

我想提出一种解决方案，而无需更改来自响应的数据，

只需将您的HTML更改为

<div class="container">
    <li *ngFor='let userlist of users | keyvalue'>
      <span *ngFor='let user of userlist.value | keyvalue'>
        {{ user.key }} : {{ user.value }}
      </span>
    </li>
</div>

工作示例： https://stackblitz.com/edit/angular-qzxodp

这里我使用了keyvalue管道，该管道用于迭代对象。

Answer 4

这可能对您有帮助

ngOnInit() {
        this.userService.getUserList().subscribe(
        (data:any) => {

           this.users = data.data;
           console.log(this.users);
        },
        error => {
            console.log(error);
        }
    );
}