Angular - Получение результата как "Null" из бэкэнда - PullRequest
0 голосов
/ 05 марта 2020

Я пытаюсь вытянуть данные из "http://169.38.82.132: 94 / GetFarmerInfo " в "http://localhost: 4200 / ". Сначала мне нужно создать токен и передать его по указанному выше URL, чтобы данные отображались в требуемом формате. Я создал токен с помощью fetchPeople () и передал то же самое, что и this.token в fetchFarmerDetails (Venktoken: string). Все работает нормально, но фермерские детали получают как ноль, пожалуйста, дайте мне знать, если какие-либо изменения должны быть сделаны, чтобы получить необходимые результаты.

//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>

Сначала я пытаюсь получить имя фермера и код фермера в одиночку. Пожалуйста, помогите мне достичь этого.

1 Ответ

1 голос
/ 05 марта 2020

Первая проблема в файле, 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 pipe ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...