要完成maryrio7答案

Question

我有这样的服务

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: Cannot read property 'map' of undefined

我尝试使用.pipe()，但后来得到TypeError: Cannot read property 'pipe' of undefined

在我的DOM中，我获得了表中的所有数据，但在控制台中只有这个错误。

Answer 1

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

this.allUsers = [];

Answer 2

之所以会这样，是因为每次更改检测发生时，都会重新评估Angular中的吸气剂。由于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所做的那样）并在{{1}内部进行映射}回调。

Answer 3

要完成maryrio7答案

您正在异步调用您的API。这意味着您的获取可能需要很长时间。在您的呼叫处理过程中，this.allUsers保持为undefined。这就是为什么您会收到此错误。

第二次完成异步操作后，this.allUsers已满，并且正在执行对引用的更改检测。这就解释了为什么将所有数据都放在表中。但是该错误之前也发生过。

Answer 4

可以在定义它们时初始化allUsers，而不是添加一条额外的最短解决方案，只需更改

allUsers: IUser[];

到

allUsers: IUser[]=[];

为什么我获得属性“地图”未定义

4 个答案:

要完成maryrio7答案