需要一些关于通过 ngFor 进行数据迭代的帮助

Question

我是 angular 的新手，我正在调用休息 api 并成功获得响应，但我无法通过 ngFor 在我的 [=25= 中重复该响应] 文件。

这是我的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

您显示的数据结构是 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 2

只需添加这一行

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

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

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);
        }
    );
}

需要一些关于通过 ngFor 进行数据迭代的帮助

Need Some help on data iteration through ngFor

angular

angular7

ngfor