InvalidPipeArgument：管道“ AsyncPipe”的“ [对象对象]”错误

如何解决InvalidPipeArgument：管道“ AsyncPipe”的“ [对象对象]”错误

当我尝试可视化HTML上的数据时，我开发的一种服务消耗了数据库中的某些数据，我遇到了问题：

Postman上的JSON：

{
    "error": false,"data": [
        {
            "id": 1,"name": "Jhosef ","surname": "Cadich","email": "[e-mail]","password": "aaaa","role": 1,"USERcol": "1","SHOP_id": 1
        }
    ]
}

服务：

export class UserService {

  apiUrl='http://localhost:3000/api/user/';
  

  constructor(private _http: HttpClient) { 
    console.log('User service running');
  }


getApiUsers(){
  console.log(this._http.get<any[]>(this.apiUrl));
  return this._http.get<any[]>(this.apiUrl);
}
}

我要在其中使用该服务的组件：

export class AdminComponent implements OnInit {

  users$:any[];

  constructor(private userService: UserService) { 
    this.admim_user$ = userService.getUsers();
  }

  ngOnInit() {
    return this.userService.getApiUsers().subscribe(data =>this.users$ = data);
  }

}
`

在HTML上

    <li class="list-group-item" *ngFor="let index of (users$ | async)?.data">
        <h6>Email-api:{{index.email}}</h6>
    </li>

非常感谢您的帮助！

解决方法

您已经在订阅该服务返回的可观察对象。 users $不可观察。

您可以将打字稿代码更改为

users$: Observable<any[]>
....
this.users$ = this.userService.getApiUsers();

这里不需要订阅，因为基本上这就是异步管道的作用。

另一种选择是不使用异步管道，而是依靠订阅。如果您想对打字稿代码中的用户进行一些额外的处理，或者由于每个订阅都将发出新的HTTP请求，而在HTML中的多个位置都需要用户列表，则此功能特别有用。

users: any[]
this.userService.getApiUsers().subscribe(data =>this.users$ = data);

以HTML

<li class="list-group-item" *ngFor="let user of users?.data">
    <h6>Email-api:{{user.email}}</h6>
</li>

请注意，我将第二种情况下的属性名称更改为users，因为$是用于命名可观察对象的约定。

我也将let index更改为let user，因为index通常是计数器0、1、2、3等。当实际值是用户对象时，最好不要将其用于其他目的。