开发者问题收集

为什么我得到属性“map”未定义

2019-09-27
422

我有这样的服务:

public getUsers() {
  return this.httpClient.get(environment.BASE_URL + `api/all`);
}

在组件中,我将用户设置为 ngx-bootstrap 表

import { Component, OnInit, PipeTransform } from "@angular/core";
import { UserService } from "./service.service";
import { IUser } from "./users.model";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";

@Component({
  selector: "app-users",
  templateUrl: "./users.component.html",
  styleUrls: ["./users.component.css"]
})
export class UsersComponent implements OnInit {
  allUsers: IUser[];
  page = 1;
  pageSize = 4;
  collectionSize: any;
  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe((data: any[]) => {
      this.collectionSize = data.length;
      this.allUsers = data;
    });
  }
  get users(): IUser[] {
    // tslint:disable-next-line:max-line-length
    return this.allUsers.map((user, i) => ({ id: i + 1, ...user 
    })).slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize 
    + this.pageSize);
  }
}

我总是收到错误 TypeError: 无法读取未定义的属性“map”

我试图使用 .pipe() ,但收到 TypeError: 无法读取未定义的属性“pipe”

在我的 DOM 中,我获得了表中的所有数据,但只有控制台中出现此错误。

3个回答

发生这种情况的原因是,每次发生变更检测时,Angular 中的 getter 都会重新评估。由于 allUsers 是异步填充的,因此有时它是未定义的。这就是您收到该错误的原因。

一种可能的解决方案是将 allUsers 初始化为空数组,这样它就永远不会未定义。

this.allUsers = [];

请记住,每次发生变更检测时都会运行此代码:

return this.allUsers.map((user, i) => ({ id: i + 1, ...user 
 })).slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize 
+ this.pageSize);
}

您真的需要它这样运行吗?每次发生变更检测时都进行映射。如果不是,您可以通过不使用 users 的 getter 来优化它,而是创建全局 users 变量(就像您对 allUsers 所做的那样)并在 this.userService.getUsers() 回调内进行映射。

Dino
2019-09-27

完成 maryrio7 的回答

您正在对您的 API 进行异步调用。这意味着您的获取可能需要很长时间。在处理您的调用时, this.allUsers 仍为 undefined 。这就是您收到此错误的原因。

第二次,当您的异步操作完成时, this.allUsers 已满,并且正在执行对引用的更改检测。这解释了为什么您会在表中获取所有数据。但之前也发生过此错误。

Axiome
2019-09-27

在分配数据之前尝试初始化 allUsers 变量:

this.allUsers = [];
maryrio7
2019-09-27