Question

我无法使用从API获取随机用户的按钮。检索所有用户时，信息显示时不会打ic，但是，如果随机选择一个，则该信息将无效。而且，它不会在每次仅保留为一个用户时随机化。错误消息：ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'John Doe'. NgFor only supports binding to Iterables such as Arrays. service file：

randomNumber = Math.floor(Math.random() * 10)
random(){
   return this._httpClient.get(`${this.placeholderApi}/users/${this.randomNumber}`)
}

html file:

<div *ngFor="let user of users" class="container emp-profile">
   <h5>
      {{user.name}}
   </h5>

users.component.ts

export class UsersComponent implements OnInit {
  users;

  getRandomUser() {
    this.clearUsers()
    this._dataService.random().subscribe(
      result => this.users = result
    )
  }

  clearUsers() {
    this.users = null 
  }

Answer 1

正如我们所建立的，在检索随机用户时，您只是得到一个对象，这意味着Angular会在尝试迭代该对象的过程中抛出关于*ngFor的错误。我看到的最简单的解决方案是，当您获得用户时，只需将其推入users数组即可。这意味着模板没有变化。

然后，在清除数组时，将其设置为空数组，否则angular会抱怨尝试推送到undefined。我个人也总是喜欢通过将其设置为空来初始化/清除数组。

进行以下更改：

export class UsersComponent implements OnInit {
  users = [];

  getRandomUser() {
    this.users = [];
    this._dataService.random().subscribe(
      result => this.users.push(result)
      // or this.users = [result] // which wouldn't throw undefined error
    )
  }

所以现在您的users仍然是数组！

API请求不会随机化，也不会显示

1 个答案: