Angular

Question

我正在尝试从“http://169.38.82.132:94/GetFarmerInfo" to "http://localhost:4200/”中提取数据。首先，我需要创建一个令牌并将其传递给上面的 URL 以使数据以所需格式显示。我使用 "fetchPeople()" 创建了一个令牌，并在 "fetchFarmerDetails(Venktoken:string)" 中传递了与 "this.token" 相同的内容。一切正常，但我得到的 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});     
    };

  }

在上面的代码中获取令牌并将其传递给 "fetchFarmerDetails(Venktoken:string)"，在控制台中显示令牌。

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>

首先我试图单独获取农民姓名和农民代码。请帮我实现这个目标。

Answer 1

第一期在文件中，people.service.ts，

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

当您使用 this.http.post() 时，您传递的第二个参数（正文）无效，您应该将其作为对象传递，例如

var data1 = {InstanceName:'ORISSA'}

接下来，在app.component.ts、

将people$;改为people$: any[] = [];

即使它适用于 people$;，请遵循在 TypeScript 中定义数组类型的语法。

您需要在这里初始化 $people 的数据类型..

也在app.component.html,

将<tr *ngFor="let person of people$|async">改为<tr *ngFor="let person of people$>

除非你使用可观察数组，否则不要使用 async 管道..

Angular - 从后端获取结果 "Null"

Angular - Getting result as "Null" from backend

api

angular-httpclient