Angular 角度-将结果获取为“；空"；从后端

我正在尝试将数据从“”拉到“”。首先，我需要创建一个令牌，并将其传递给上面的URL，以获得以所需格式显示的数据。我使用“fetchPeople（）”创建了一个toke，并在“fetchFarmerDetails（Venktoken:string）”中传递了与“this.token”相同的toke。一切都很好，但我得到的farmerdetails为空，请让我知道，如果有任何改变已经做，以获得所需的结果

//people.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse ,HttpHeaders} from '@angular/common/http';


@Injectable({ providedIn: 'root' })

export class PeopleService {
  constructor(private http: HttpClient) { } 

  token:string;

  fetchPeople() {       
      let url = "http://169.38.82.132:94/token";    
      var data = "grant_type=password&username=user&password=user";
  return this.http.post( url, data,
    {headers: new HttpHeaders({
      'Accept': 'application/json',
      'Content-Type': 'application/json; charset=utf-8'
    })}  
    )
    };   

    fetchFarmerDetails(Venktoken:string) {
      console.log("Welcome");
      console.log(Venktoken);
      this.token = Venktoken;    
      console.log(this.token);
     let url = "http://169.38.82.132:94/GetFarmerInfo";     
     var data1 = "'InstanceName': 'ORISSA'";
let headers = new HttpHeaders()
.set("Authorization", 'Bearer ' + this.token)
.set('Content-Type','application/json');
     return this.http.post(url, data1, {headers:headers});     
    };

  }  

在上面的代码中，am获取令牌并将其传递给“fetchFarmerDetails（Venktoken:string）”，在控制台中显示令牌gets

app.component.ts
import { Component } from '@angular/core';
import { PeopleService } from './people.service';
import { HttpClient } from '@angular/common/http';

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

export class AppComponent {
  people$;
  name:string;
  Temp_token: string;
  title = 'demojsontable';
  constructor(private peopleService:PeopleService,private http:HttpClient){

  }
  fetchPeople() {
    this.peopleService.fetchPeople().subscribe((res:any)=>{      
      console.log(res);
      this.Temp_token= res.access_token;      
      console.log(this.Temp_token); 
      this.fetchFarmerDetails();     
    });
  }

  fetchFarmerDetails(){  

    this.peopleService.fetchFarmerDetails(this.Temp_token).subscribe((resp:any)=>{         
    console.log(resp);   
    this.people$ = resp.FarmerDetails;
    });
   }

}

最后，我需要以表格形式显示结果，因为我使用下面的代码

app.component.html
<!--<app-datas></app-datas>-->
<button (click)="fetchPeople()">Fetch People</button>

<hr>
<table border="1">
    <thead>       
            <td>Farmer Code</td> 
            <td>Farmer Name<td>  

    </thead>
    <tbody>
    <tr *ngFor="let person of people$|async">
        <td>{{person.FarmerName}}</td> 
        <td>{{person.FarmerCode}}</td>        
    </tr>
</tbody>
</table>

app.component.html
招人

农民法典
农民姓名
{{person.FarmerName}
{{person.FarmerCode}

---

首先，我试图单独获取farmername和farmer代码。请帮助我实现这一点。

第一个问题在文件

people.service.ts

中

fetchFarmerDetails(Venktoken:string) {
     .
     .
     .
     var data1 = "'InstanceName': 'ORISSA'";
     .
     .
     return this.http.post(url, data1, {headers:headers});     
};

当您使用时，您传递的第二个参数（body）是无效的，您应该像

var data1 = {InstanceName:'ORISSA'}

接下来，在

app.component.ts

中

更改

people$至
人员$：任意[]=[]

即使它与
人$一起工作，请遵循在TypeScript中定义数组类型的语法

您需要在此处初始化
$people
的数据类型

同样在
app.component.html
中

将
更改为
您的意思是在这里得到null
console.log（resp）？您的开发人员工具中的console/network选项卡中是否有关于api调用的任何错误？您是否可以尝试更改
var data1=“'InstanceName'：'Orisa'”变量声明到
var data1={InstanceName:'ORISSA'}
它应该是这样一个对象..太棒了！！！！感谢@Maniraj Murugan，我使用app.component.html中的代码，您能告诉我如何在前端获取farmername和代码吗？我需要看到的是您在
console.log（resp）中获得的确切数据，这样我就可以了解如何在
HTML
模板中显示它。。您能否在不更改人员$的情况下，将收到的数据发布到
resp
；致人$：任意[]=[]；它工作得很好，感谢您的支持和指导。@Venkat，虽然它可以工作，但我建议您遵循在TypeScript中定义数组类型的语法。@Venkat，此外，我建议您将
var
关键字替换为
const
，因为我看不到您正在使用
var
关键字将值重新分配给变量。。即使要重新分配，也可以使用
let
关键字。。代码中的所有内容都会工作，但如果您遵循一些最佳实践，那么您的代码将是整洁的，兄弟。好的@Maniraj Murugan