InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' 错误

Question

当我尝试在 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>

非常感谢您的帮助！！！

Answer 1

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

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

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

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

另一种选择是不使用异步管道并依赖于订阅。如果您想在打字稿代码中对用户进行一些额外处理，或者如果在 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，因为 $ 是命名可观察对象的约定。

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

InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' 错误

InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' ERROR

angular

service

ngfor