Angular를 사용하여 JSON의 특정 개체에 액세스하는 방법은 무엇입니까?

API에서 특정 데이터에 액세스하려고하는데 문제가 있습니다. 다음은 API의 JSON 구조입니다.

나는 액세스 꿔 Name, StateName및 CityName내에서 value반복 테이블을 통해. ngFor가 배열을 반복하지 않기 때문에 "개체 '유형의'[개체 개체] '를 지원하는 다른 개체를 찾을 수 없습니다. 테이블을 채우기 위해 데이터를 반복하도록 코드를 수정하려면 어떻게해야합니까?

component.ts :

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

  customer: any;

 constructor(private Service: CustomerDataService) { }

  ngOnInit(): void {
    this.getCustomerData();
  }

  public getCustomerData() {
    this.Service.getCustomers().subscribe((data)=>{
      console.log(data);
      this.customer = data;
    }) 
  }

}

HTML :

<div class="container">
    <form class="form-inline">
        <div class="input-group mb-2">
            <div class="has-clear">
                <input type="text" name="search" required class="form-control" placeholder="Name" />
                <button class="clear-data" type="reset"><i class="icon-close-bold-sm"></i></button>
            </div>
            <button type="submit" class="btn btn-primary mb-2 ml-3">Search</button>
        </div>
    </form>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">State</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor = "let customers of customer">
                    <td scope="row">{{customers.value.Name}}</td>
                    <td scope="row">{{customers.value.StateName}}</td>
                    <td scope="row">{{customers.value.CityName}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>