从 Web 服务（Angular 4）获取数据时出现问题

Question

我正在尝试从 Web 服务 API 获取数据

我得到的只是控制台上的数据。

网络服务需要 ID，所以我先发布 ID，然后在网络服务中获取与该 ID 相关的数据，这是我的组件。

HTML：

<form #educationForm="ngForm" method="post">
    <select [(ngModel)]="type_id"  name="type_id" class="rounded-inputs20  col-md-2"  id="getGrades">
        <option selected="selected">Education type...</option>
        <option  id="" *ngFor="let type_id of name_en" [ngValue]="type_id.id">{{type_id.name_en}}</option>
    </select>
</form>

<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="button" name="next" class="next action-button (click)="onSubmitGrade(educationForm)"  value="next"/>

<fieldset>
    <div class="col-md-12 text-center row schools">
        <div class="col-md-6"  *ngFor="let grade of grades">
            <h6 style="font-size: 26px;" name="grades"> 
            {{grade.name}}<input [value]="grade.id" id="select-all-grades6" type="checkbox">  
            </h6>
            <br>
        </div>
    </div>
</fieldset>

TS：

private educationType() {
return this._http.get('https://crm.easyschools.org/api/
en/schools/create/educationtypes')
  .subscribe(type_id => {
    this.id = type_id.id;
    this.name_en = type_id.data;
    console.log(type_id.data);
  });
}

onSubmitGrade(form: NgForm) {
let formData: FormData = new FormData();
// debugger;
formData.append('education_type_id', this.type_id);
this._http.post('https://crm.easyschools.org/api/en/schools/
create/getgrades', formData)
  .subscribe(grades => {
    // this.type_id = this.education_type_id;
    this.id = this.type_id.id;
    this.name = grades.data;
    console.log(grades.data);
  }, (err: HttpErrorResponse) => {
    console.log(err);
  });
}

我从控制台得到的响应是：

(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
{id: 11, name: "Elementary", lessons_per_day: 5, lesson_duration: 
"08:21:20", day_start_at: "08:24:27", …}
1
:
{id: 13, name: "Secondary", lessons_per_day: 6, lesson_duration: 
"09:25:25", day_start_at: "10:29:00", …}
2
:
{id: 16, name: "Castor Sharp", lessons_per_day: 12, lesson_duration: 
"00:00:12", day_start_at: "17:30:00", …}
3
:
{id: 17, name: "Ifeoma Cochran", lessons_per_day: 12, lesson_duration: 
"00:00:04", day_start_at: "23:09:00", …}
4
:
{id: 18, name: "Jermaine Tyson", lessons_per_day: 12, lesson_duration: 
"00:00:14", day_start_at: "18:01:00", …}
5
:
{id: 19, name: "Quin Wells", lessons_per_day: 12, lesson_duration: 
"00:00:04", day_start_at: "11:25:00", …}
6
:
{id: 20, name: "Hiram Coffey", lessons_per_day: 12, lesson_duration: 
"00:00:04", day_start_at: "06:14:00", …}
7
:
{id: 21, name: "Shad Floyd", lessons_per_day: 12, lesson_duration: 
"00:00:04", day_start_at: "21:01:00", …}
8
:
{id: 22, name: "Oleg Ball", lessons_per_day: 12, lesson_duration: 
"00:00:41", day_start_at: "00:08:00", …}
9
:
{id: 23, name: "Ivory Gates", lessons_per_day: 12, lesson_duration: 
"00:00:41", day_start_at: "16:33:00", …}
10
:
{id: 24, name: "Serina Edwards", lessons_per_day: 12, lesson_duration: 
"00:00:41", day_start_at: "13:51:00", …}
11
:
{id: 25, name: "dsos", lessons_per_day: 44, lesson_duration: 
"00:00:45", 
day_start_at: "12:30:00", …}
12
: 
{id: 26, name: "Nissim Hurley", lessons_per_day: 12, lesson_duration: 
"00:00:04", day_start_at: "10:33:00", …}
length
:
13
__proto__
:
Array(0)

我需要能够在屏幕上显示控制台上的数据，但我的代码没有显示任何内容。 随意使用 API 链接来测试并向我展示我的代码中缺少的内容。

Answer 1

我没有看到您在模板中声明了成绩，声明了变量并将响应数据分配给变量。

grades :any = [];

然后

this._http.post('https://crm.easyschools.org/api/en/schools/ create/getgrades', formData) .subscribe(result=> { this.grades = result.data;}, (err: HttpErrorResponse) => { console.log(err); }); }

或用现有模板将成绩替换为姓名，

 <div class="col-md-6"  *ngFor="let grade of name"