angular9 – Angular 10 Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays

I’m trying to invoke my REST API to get some data and display them in html page Using Angular 10.
here’s my my http service.

public findUsers(page: number, size: number): Observable<User()> {
    return this.http.get<User()>(AUTH_API+`users?page=${page}&size=${size}`, httpOptions);
}

And here’s my service’s call.

  export class AccountComponent implements OnInit {
  paginator: MatPaginator = {} as MatPaginator;
  loaded: boolean;
  users: User();
  data:any;

  constructor(private accountSerive: AccountService) { }

  ngOnInit(): void {
    this.paginator.pageIndex = 0;
        this.paginator.pageSize = 20;
    this.getUsers();
  }
  getUsers() {
    this.data = this.accountSerive.findUsers(this.paginator.pageIndex, this.paginator.pageSize)
    .subscribe((data) => {
      this.users = data;
      this.loaded = true; 
    });
  }

}

Here’s my HTML code

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

And finally my user Model

    export interface User {
    email: string;
    password: string;
    userName: string;
    roles: (Role); 

}
export interface Role {
    name: string; 
    
}