Error trying to diff 'Leanne Graham'. Only arrays and iterables are allowed Stack trace:

Question

I am currently trying to program an app getting info from the Mock API http://jsonplaceholder.typicode.com/ I did create an array with all the user data. The problem is that I am not able to get the data from all the users separately using a button.
My code is:

app.component

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import "rxjs";
import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import { User } from './user';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  readonly ROOT_URL = 'http://jsonplaceholder.typicode.com/';

  users : Observable <User[]>;



  constructor(private http: HttpClient) {}

  getUsers(users){
    this.users = this.http.get<User[]>(this.ROOT_URL + 'users' )
  }

  getUser(){
   this.users = this.http.get<User[]>(this.ROOT_URL + 'users/1')
 }
}

app.component.html

<h1>User List</h1>
<button (click) = "getUsers()">User List</button>
<div *ngFor= "let user of users | async ">
  {{ user | json }}
  <button (click) = "getUser()">Login</button>
</div>

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { UserComponent } from './user/user.component';
import { UserDetailsComponent } from './user/user-details/user-details.component';
import { UserListComponent } from './user/user-list/user-list.component';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    UserDetailsComponent,
    UserListComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

user.ts

export interface User{
    id: number;
    userid:number;
    title: string;
    body: string;

}