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


#1

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


and beow is the screenshot of the data coming to the last below code of html(ie., this.userclaims of home.ts)

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…