为什么我得到属性“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