ОШИБКА Ошибка: не удается найти другой поддерживающий объект '[object Object]' типа 'object' (Angular)

Question

У меня ошибка в заголовке при создании этой программы.Я пытаюсь получить некоторую информацию от REST API, используя Angular.Я приложил сервис, TS из компонента и HTML.Я использую rxjs и Observable для этого.Я внедряю сервис в конструктор.Я буду признателен за любую помощь.Спасибо!

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>

Answer 1

ngFor - это конструкция, используемая для репликации тега для нескольких элементов, например, если у вас есть массив клиентов. В вашем случае его не нужно использовать, оно должно быть таким простым:

<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>