使用angular / express从后端加载用户

时间:2018-04-23 20:55:48

标签: node.js angular mongodb express angular5

我正在用MEAN堆栈做一个小项目,似乎有些迷失在这里的东西。我可以从MongoDB加载一个用户就好了,但是加载所有用户似乎有点迷失。

在我的路线文件中我有

router.get('/admin, function(req, res, next) {
  User.find(function (err, user) {
    if(err) return next(err);
  }
});

我从数据库中获得结果,例如:

{"role":"user","_id":"5ade3f1c303744098c0acef1","firstname":"testFName","surname":"testSName","username":"testusername","password":"$2a$10$db1yx10Y3XOyyMt25PA5bOK3qso9fTxf9iOOWMapT7/Vt5n2gfCFC","email":"testemail@email.com","phonenumber":"0851234567","housename":"Villa Maria","addressline1":"Listry","addressline2":"Killarney","addressline3":"","county":"Kerry","__v":0}

我跟随指南,但它似乎没有涵盖下一部分,我想知道是否有人知道我应该做什么。我知道我想在某个地方使用* ngFor。

我在构造函数中调用了authService和路由器

user: Object;

ngOnInit(){
  this.loadUsers();
}

public loadUsers() {
  this.authService.getUsers().subscribe((data) => {
    this.user = data;
}

在我的表格中我正在使用

<tr *ngFor="let user of users">
  <td>{{ user.username }} </td>

但我一直得到一个未定义的错误。我似乎无法看到它是如何定义的。

1 个答案:

答案 0 :(得分:1)

这是非常标准的错误。 Angular为您提供此错误,因为它尝试在创建组件时立即呈现*ngFor ,而调用服务需要时间并且稍后会带来结果。您应该在模板中添加*ngIf="users != null"之类的内容,并将*ngFor放入其中。请务必检查您要使用*ngFor呈现的数组以避免此错误,或者在代码中确保您的数组属性永远不会获得nullundefined值。