需要使用 Angular 4 服務從 Web 服務獲取數據

Question

我創建了一個服務，通過將特定 ID 發送到后端然后獲取有關所選 ID 的數據來幫助我從 Web 服務中提取詳細信息，我創建了一個調用該服務的函數，現在我只想知道缺少什么我的代碼。

我的服務：

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>