Блог

Я застрял с этой ошибкой Ошибка ошибки: не удается найти другой поддерживающий объект ‘[object Object]’ типа ‘object’. ngFor поддерживает привязку только к итерациям, таким как массивы.

Я пытаюсь извлечь данные из API, но он показывает мне эту ошибку, поскольку я все еще изучаю angular, пожалуйста, подскажите мне, как справиться с такого рода ошибками.

1. метаданные-service.service.ts

 import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Pincodes } from 'src/app/Model/Pincodes';
import { baseURL } from 'src/environments/environment';

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

  constructor(private http:HttpClient) { }

  public GetPincodes() : Observable<any> {
    console.log("Calling GetPincodes API")
    return this.http.get("/Metadata/api/metadata/getpincodes") // My API Link
  }

}
 

2. API состоит из следующих данных

 {
  "program": null,
  "version": null,
  "dateTime": null,
  "success": true,
  "errorCode": null,
  "errorMessage": null,
  "message": "Pincodes read Successfully",
  "data": [
    {
      "pincode": 400708,
      "village": "Airoli",
      "taluka": "Thane",
      "district": "Thane",
      "state": "Maharashtra"
    },
    {
      "pincode": 416007,
      "village": "Kaamba",
      "taluka": "Kalyan",
      "district": "Thane",
      "state": "Maharashtra"
    },
    {
      "pincode": 421102,
      "village": "Atali",
      "taluka": "Kalyan",
      "district": "Thane",
      "state": "Maharashtra"
    },
    {
      "pincode": 421501,
      "village": "Ambarnath",
      "taluka": "Ambarnath",
      "district": "Thane",
      "state": "Maharashtra"
    },
    {
      "pincode": 421503,
      "village": "Ambeshiv",
      "taluka": "Ambarnath",
      "district": "Thane",
      "state": "Maharashtra"
    }
  ]
}
 

Меня интересует массив данных

3. Pincode.ts

 export class Pincodes {
    pincode : number
    village : string
    taluka : string
    district : string
    state : string
}
 

4. регистрация-page.component.ts

 import { Component, OnInit } from '@angular/core';
import { data } from 'jquery';
import { Pincodes } from 'src/app/Model/Pincodes';
import { MetadataServiceService } from 'src/app/shared/services/metadata-service.service';
import { Albums } from "src/app/Model/albums";
import { Observable, of } from 'rxjs';
import {MatTableDataSource, MatTableModule} from '@angular/material/table';
import { report } from 'process';


@Component({
  selector: 'app-register-page',
  templateUrl: './register-page.component.html',
  styleUrls: ['./register-page.component.css']
})

export class RegisterPageComponent implements OnInit {


 observeData : Pincodes[]  
  modifiedText: any;
  PinSelected : any = {}

 
 


  constructor(private _metadataService: MetadataServiceService) {  }

  ngOnInit(){
    
   this._metadataService.GetPincodes()
   .subscribe(data => {
      this.observeData = data;
    });
  }
onPincodeSelected(val : Pincodes){
    console.log("value"   val);
    this.customFunction(val)
  }
  customFunction(val : Pincodes){
    this.modifiedText = "The Selected Pin was "   val.pincode   " and selected District is "   val.village
      console.log("modifiedText"   this.modifiedText);
      console.log("Pincode Selected"   this.PinSelected);
      console.log("observeData Selected"   this.observeData);
      
      
  }
  
}
 

5. register-page.component.html

 <select
        [(ngModel)]="PinSelected"
        (ngModelChange)="onPincodeSelected($event)"
      >
        <option *ngFor="let pin of observeData" [ngValue]="pin">
          {{ pin.pincode }}
        </option>
      </select>
      <div>
        <p>{{ modifiedText }}</p>
      </div>
 

Ошибка: не удается найти другой поддерживающий объект ‘[object Object]’ типа ‘object’.

Попробуйте это:

 ngOnInit(){
    
   this._metadataService.GetPincodes()
   .subscribe(res=> {
      this.observeData = res.data;
    });
  }