Cannot find a differ supporting object 'function () {....}NgFor only supports binding to Iterables such as Arrays

Ionic Framework ionic-v3
1

My data is not binding to html view(to Frontend ie. home.html). Below is the screenshot of error

ConsoleError
ConsoleError.png1142×855 83.8 KB

and beow is the screenshot of the data coming to the last below code of html(ie., this.userclaims of home.ts)
FrontView
FrontView.png1011×855 36.6 KB

What may be the solution for this…Can anyone help me out?..
register.ts

  OnSubmit(mobno){
    this.userClaims=null;
    this.regService.sendMobileNo(mobno).subscribe((data : any)=>{
      this.userClaims = data;
      this.navCtrl.push(HomePage);
    },
   (err : HttpErrorResponse)=>{
     this.isLoginError = true;
   });
  }

app-data.service.ts

sendMobileNo(mobno:any) {
        var data = "MobileNo=" + mobno;
       var url=this.uihelper.CallWebAPIUrlNew("/Tenant/GetTenantsByMobile") + "?" + data;
       return this.http.get(url).map((response: Response) => {
             var datanew = response.json();
             this.userClaims=datanew;
             return response.json;
        }).catch(this.handleErrors);
       }

home.ts

import { UserClaim } from '../services/userclaim';
export class HomePage implements OnInit{
  userClaims:UserClaim;
    constructor(public navCtrl: NavController, private route: ActivatedRoute, private userService: RegisterService) {
}
  ngOnInit() {
     this.userClaims= this.userService.userClaims;
  }
}

home.html

<div class="row">
  <div class="col s12 m7">
    <div class="card">
        <!--interpolation-->
      <div class="card-content">
           <div *ngFor="let order of userClaims" style="border: 1px solid lightgrey; padding: 15px; margin: 5px 0;">
      <span> OrderNumber : {{ order.Id |json }}</span> <br>
      <span>P_O_Number : {{ order.Name | json }}</span> <br>
    </div> 
      </div>
    </div>
  </div>
</div>
2

By changing

return response.json;

line of app-data.service.ts to

return response.json();

my problem solves…