InvalidPipeArgument：管道“AsyncPipe”的“[object Object]”错误答案

【问题标题】：InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' ERRORInvalidPipeArgument：管道“AsyncPipe”的“[object Object]”错误
【发布时间】：2020-08-27 07:56:50
【问题描述】：

当我尝试在 HTML 上可视化数据时，我开发的服务有一个问题，该服务使用我的数据库中的一些数据：

邮递员上的 JSON：

{
    "error": false,
    "data": [
        {
            "id": 1,
            "name": "Jhosef ",
            "surname": "Cadich",
            "email": "j@email.com",
            "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>

非常感谢您的帮助！！！

【问题讨论】：

标签： angular service ngfor

【解决方案1】：

您已经订阅了服务返回的 observable。 users$ 不是可观察的。

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

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

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

另一种选择是不使用异步管道并依赖订阅。如果您想在 typescript 代码中对用户进行一些额外的处理，或者如果在 HTML 中的多个位置需要用户列表，这尤其有用，因为每个订阅都会发出一个新的 HTTP 请求。

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，因为 $ 是命名 observables 的约定。

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

【讨论】：