需要使用 Angular 4 服务从 Web 服务获取数据

Question

我创建了一项服务来帮助我从 Web 服务中提取详细信息，方法是向后端发送特定 ID，然后获取有关所选 ID 的数据， 我创建了一个函数来调用服务，现在我只想知道我的代码中缺少什么。

我的服务：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpParams } from 
'@angular/common/http';
import { environment } from '../../environment/environment'
import { SchoolsModel } from '../models/school-model';

@Injectable()
export class GradesService {
constructor(public http: HttpClient) {
}

public getSchoolGrades(schoolId: number) {
const apiUrl: string = environment.apiBaseUrl + 
'/api/en/admin/grades/division';
let promise = new Promise((resolve, reject) => {
  return this.http.get(apiUrl, { params: new 
HttpParams().set("school_id", schoolId.toString()) })
    .subscribe(respose => {
      console.log(respose.data);
      return resolve(respose.data);
    }, (err: HttpErrorResponse) => {
      return reject(err);
    });
});
return promise;

}

}

我的组件 TS：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { AuthService } from '../common-services/auth/auth.service';
import { UserService } from '../common-services/user.service';
import { Title } from '@angular/platform-browser';
import { SchoolsModel } from '../models/school-model';
import { SchoolsService } from '../business-services/schools.service';
import { GradesService } from '../business-services/grades.service';

declare const $;
@Component({
selector: 'app-divisions',
 templateUrl: './divisions.component.html',
styleUrls: ['./divisions.component.css'],
encapsulation: ViewEncapsulation.Emulated
})
export class DivisionsComponent implements OnInit {

  public divisionList: SchoolsModel;

constructor(
private schoolService: SchoolsService,
private gradesService: GradesService,
private titleService: Title,
private authService: AuthService,
private route: ActivatedRoute
) {}

ngOnInit(): void {

         this.getSchoolGrades();

}

private getSchoolGrades(schoolId: number) {
this.gradesService.getSchoolGrades(schoolId)
  .then((division: SchoolsModel) => {
   // debugger;
    this.divisionList = division;
  }).catch(err => {
    console.error("Error occured :", err)
  })
}


}

我的组件 HTML

<div>
<button name="American Primary" 
class="choose-list arrow-onclick1" data-toggle="collapse" data-
target="#list1">
{{divisionList.name}}<i class="fa fa-arrow-right pull-
right arrow-down-onclick1" aria-hidden="true" style="margin-top: 
12px"></i>
</button>
<a routerLink="/editaisdivision" 
style="text-decoration: none;"><span class="fa fa-pencil pen-pen-pen" 
aria-hidden="true" style="margin-left: 10px; color: #171b5e;"></span>
</a>
</div>

学校模型：

export class SchoolsModel{
id:number;
name:string;
logo:string;
vision:string;
mission:string;
address:string;
latitude:number;
longitude:number;
district_id:number;
created_at:Date;
updated_at:Date;
}

环境：

export const environment = {
apiBaseUrl: 'https://crm.easyschools.org'
 }

我想这就是您可能需要告诉我的所有内容，为什么组件没有从 Web 服务捕获正确的数据并将其显示在屏幕上。

我尽量做到具体，如果有不清楚的地方请告诉我。

Answer 1

当你拥有像 RxJs 这样强大的工具时，使用 Promise 并不是真正的最佳解决方案，尤其是因为它是 Angular 用来处理 http 请求的工具。尝试如下重写您的服务：

public getSchoolGrades(schoolId: number) {
    const apiUrl: string = environment.apiBaseUrl + 
'/api/en/admin/grades/division';
    return this.http.get(apiUrl, { params: new HttpParams().set("school_id", schoolId.toString()) });
}

然后在你的组件中：

ngOnInit(): void { 
    this.getSchoolGrades(123);
}

private getSchoolGrades(schoolId: number) {
    this.gradesService.getSchoolGrades(schoolId)
        .catch(err => {
            console.error("Error occured :", err)
        })
        .subscribe((division: SchoolsModel) => {
            this.divisionList = division;
        });
}

Answer 2

你的方法签名是这样的

getSchoolGrades(schoolId: number)

但在 ngOnInit 中，您调用该方法时没有传递 schoolId

this.getSchoolGrades();

Answer 3

这是调用网络服务并获取结果的简单方法

let token="Bearer"+" "+tokenUser;
    var headers = new Headers();
    headers.append('Authorization',token);
    headers.append('Content-Type','application/json');
    let options = new RequestOptions({ headers: headers });
    this.spinnerService.show();
    this.http.get('https://www.000webhost.com/sample/rest_api/api/all-user-details',options)
    .subscribe((res)=> {
         this.spinnerService.hide();            
         this.userdetails=res.json();

         console.log(this.userdetails);  

      }
        ,(err) => {
        this.spinnerService.hide();
        console.log("Error occured");
      });         
  }



  <tbody>
       <tr *ngFor = "let user of userdetails; let i=index">                   
       <td align="left" valign="middle">{{i+1}}</td>

       <td align="left" valign="middle">{{user.IPADDRESS}}</td> 
       <td align="left" valign="middle">{{user.INSERT}}</td>     
       <td align="left" valign="middle">{{user.UPDATE}}</td>     
      </tr> 
</tbody>