arrays - 如何将 API 对象转换为数组
问题描述
我坚持这个错误错误错误:找不到“对象”类型的不同支持对象“[对象对象]”。NgFor 仅支持绑定到 Iterables,例如 Arrays。
我正在尝试从 API 获取数据,但它向我显示了此错误,因为我仍在学习角度,请指导我如何解决此类错误。
- 元数据-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
}
}
- 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"
}
]
}
我对数据数组感兴趣
- Pincode.ts
export class Pincodes {
pincode : number
village : string
taluka : string
district : string
state : string
}
- 注册页面.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);
}
}
- 注册页面.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;
});
}
推荐阅读
- javascript - 是否可以在实际获取之前检查 onSnapshot() 是否发现了更改?
- python - Python 模块混淆
- c# - ASP.NET Core NullReferenceException 表单发布后
- documentation - 如何使用 aws cdk 记录 rest api
- sql-server - SQL Server 登录被锁定,但并未真正被锁定
- javascript - 如何确定 HTML 元素的大小?(添加元素的补间大小)
- node.js - 在 node.js 中使用 _id 从 MongoDB 获取对象
- php - i18nFormat 中缺少时区
- r - 在列名的循环内创建公式
- rest - 多个参数 REST API 调用