如何在 Angular 中传递邮递员 api 数据？答案

【问题标题】：How to pass postman api data in Angular?如何在 Angular 中传递邮递员 api 数据？
【发布时间】：2020-06-09 00:25:12
【问题描述】：

我尝试从 Postman API 手动传递 json 数据，它工作正常，如下所示。如何在 Angular 中从 Postman API 传递所有 json 数据？

组件：

logs = [{
  "FPO_Name": "sample",
  "FarmerCode": "sample",
  "FarmerName": "sample",
  "Sur_Name": "sample",
  "Father_Name": "sample",
  "Farmer_Dob": "1/1/1990 12:00:00 AM",
  "Farmer_Address1": "sample",
  "Farmer_Address2": "sample",
  "Farmer_Country": "sample",
  "Farmer_State": "sample",
  "Farmer_District": "sample",
  "Farmer_Taluk": "sample",
  "Farmer_Panchayat": "sample",
  "Farmer_Village": "sample",
  "Farmer_Pincode": "123456",
  "Gender": "Male",
  "Mobile_No": "1234567890",
  "RegisterDate": "01-01-2001",
  "LatitudeAndLongitude": " ",
  "BankAccountNo": "",
  "BankName": "",
  "NoOfAcres": "",
  "FarmerKYC": "sample"
}];

constructor() { }

getdetails() {
  return from([this.logs]);
}

【问题讨论】：

请阅读如何发出 HTTP 请求

标签： json angular http

【解决方案1】：

    sendHttpCall(firstName: string, lastName: string) {
    const url = 'http://localhost:8080/yourBS/yourAPI';
    const body = {
        firstName, lastName // can be a JSON object
    }
    const headers = new Headers(
        {
            'Content-Type': 'application/json'
        });
    return this.http.post(url, body, {headers: headers});
    }

您不需要对多个 JSON 对象进行字符串化

【讨论】：

谢谢，但我的 backend.service.ts 完整代码是 `import { Injectable } from '@angular/core';从'rxjs'导入{从}； @Injectable({ providedIn: 'root' }) 导出类 BackendService { logs = [] ];构造函数（） { } getdetails（） { 从（[this.logs]）返回； } } ``。所以我需要替换上面的代码而不是日志...
您需要编写一个网络服务来实际负责为您执行此 API 调用。 @Venkat 发布的代码似乎合法并且应该可以工作，但理想情况下，您应该将此代码放在单独的网络服务中，并从您各自的组件文件中调用它。
好的，但是我在控制台中得到了响应，因为“NgFor 只支持绑定到诸如数组之类的可迭代对象。”在 app.component.html 我使用了<li *ngFor="let person of people$">{{person.FarmerCode}}</li>。在 app.component.ts 我使用了export class AppComponent { people$; title = 'demojsontable'; constructor(private peopleService:PeopleService,private http:HttpClient){ } fetchPeople() { this.people$ = this.peopleService.fetchPeople(); } }
我工作了，最后我得到控制台错误，因为“从源 'localhost:4200' 访问 XMLHttpRequest 已被 CORS 策略阻止：没有'Access-Control-Allow-Origin ' 请求的资源上存在标头。" .如何解决？