CODEWITHSUNDEEP
angularrest
ryy77
ryy77

Reputation: 1294

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'(Angular)

I've got the error in the title when I created this program. I try to get some info from an REST API using Angular. I attached the service, the ts from the component and the html. I use rxjs and Observable for this. I inject the service in the constructor. I will appreciate any help. Thank you! console

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { HeroService } from './services/hero.service';
import {Customer} from './models/customer';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.scss']
})
export class HeroComponent implements OnInit {

  private ndg: string;
  public customerData;

  constructor(private heroService: HeroService) {
     this.ndg='117158101';
   }

  ngOnInit() {
      this.heroService.getCustomerInfo(this.ndg)
        .subscribe(data => { this.customerData=data,
          console.log(this.customerData)
        }, error => console.log(error));
    }
}
import { Injectable } from '@angular/core';
import { ApiService } from '../../../../services/base.services';
import { Observable } from 'rxjs';
import { environment } from '../../../../../../environments/environment';
import {Customer} from '../models/customer';

@Injectable({
  providedIn: 'root'
})
export class HeroService {

  constructor(private apiService: ApiService) { }

  getCustomerInfo(ndg: string) {
    const url = `${environment.apiUrl}${environment.ur3Path}cifCustomerDetails/customers/${ndg}`;
    return this.apiService.get(url);
  }
}
<!--
 --   Hero component
-->

<section class="hero">
  <div class="content-hero" *ngFor="let customer of customerData">
    <h1>Welcome to your loan <br/> application, {{customer.name}}</h1>
    <h4>Your RM today is Sandra Menter.</h4>
  </div>
</section>

Upvotes: 0

Views: 49

Answers (1)

bracco23
bracco23

Reputation: 2211

ngFor is a construct used to replicate the tag for multiple elements, like if you have an array of customers. In your case, there is no need to use it, it should be as simple as:

<section class="hero">
  <div class="content-hero">
    <h1>Welcome to your loan <br/> application, {{customerData.customer.name}}</h1>
    <h4>Your RM today is Sandra Menter.</h4>
  </div>
</section>

Upvotes: 1

Related Questions