Angular 8 - 对 json 文件的 GET 请求问题

Question

请帮忙，我正在尝试使用 REST API 提升我的 django 网页，并在我开始的地方使用 Angular FrontEnd。我遵循了一些关于如何使用 REST api 的教程，但不知何故我在那里犯了一个错误。浏览器在请求内容时没有显示错误，但它没有出现。我感谢每一点帮助.....

我们去 usluga-list.component.ts:

import { Component, OnInit } from '@angular/core';
import { Observable } from "rxjs";
import { Usluga } from "../models/usluga";
import { UslugaService } from "../services/usluga.service";


@Component({
  selector: 'app-usluga-list',
  templateUrl: './usluga-list.component.html',
  styleUrls: ['./usluga-list.component.css']
})
export class UslugaListComponent implements OnInit {

  uslugi: Observable<Usluga[]>;

  constructor(private uslugaService: UslugaService) { }

  ngOnInit() {

    this.loadUslugiData();
  }

  loadUslugiData(){

    this.uslugi = this.uslugaService.getAllUslugi();

然后我有 usluga.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { Usluga } from "../models/usluga";


@Injectable({
  providedIn: 'root'
})

export class UslugaService {

  private endpoint ='http://localhost:8000/uslugi/';

  constructor(private http: HttpClient) { }



  getAllUslugi(): Observable<any>{
    return this.http.get(this.endpoint) 

}



  getUsluga(id: number): Observable<any> {
    return this.http.get(this.endpoint + id);
  } 




}

然后我有 app-routing.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UslugaListComponent } from './usluga-list/usluga-list.component';


const routes: Routes = [
  {path: '', redirectTo: 'uslugi', pathMatch: 'full'},
  {path: 'uslugi', component: UslugaListComponent}

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { } 

奇怪的是，我通过 localhost:8000/uslugi 获取了 json，而且 Angular 中一定有问题：

[{"id": 1, "title": "Wizyta", "text": "Wizyta", "price": "10.99", "slug": "wizyta-p", "category": "psyc", "lekarz_id": 1}, {"id": 2, "title": "Wizyta d", "text": "Wizyta dia to...", "price": "199.30", "slug": "wiz", "category": "sek", "lekarz_id": 1}]

Answer 1

为了进行 http 调用，您需要订阅它。

在你的组件中：

this.uslugi = this.uslugaService.getAllUslugi();
// if you just want to test that it works:
this.uslugi.subscribe();

正确的方法是取消订阅，有很多方法可以做到这一点。这是一种只需要 'rxjs' 和操作符的方法。所以你所做的基本上是这样的：

@Component({
  selector: 'app-usluga-list',
  templateUrl: './usluga-list.component.html',
  styleUrls: ['./usluga-list.component.css']
})
export class UslugaListComponent implements OnInit, OnDestroy {

  uslugi: Observable<Usluga[]>;
unsubscribe = new Subject();

  constructor(private uslugaService: UslugaService) { }

  ngOnInit() {

    this.loadUslugiData();
  }

ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
}

  loadUslugiData(){

    this.uslugi = this.uslugaService.getAllUslugi();
    this.uslugi.pipe(takeUntil(this.unsubscribe)).subscribe();
}

那应该会为你进行 http 调用

Answer 2

observable 变量（存储来自 api 的对象）名称必须与 html 模板中的名称相同，类似（flightss）：

@Component({
  selector: 'app-flight-list',
  templateUrl: './usluga-list.component.html',
  styleUrls: ['./usluga-list.component.css']
})
export class UslugaListComponent implements OnInit {

  flightss: Observable<Usluga[]>;

  constructor(private uslugaService: UslugaService) { }

  ngOnInit() {

    this.loadUslugisData();
  }
  loadUslugisData() {

    this.flightss = this.uslugaService.getAllUslugi();

  }

}

并在模板中：

<tr *ngFor="let flight of flightss | async; let i=index">
                        <td class="text-center">{{flight.id}}</td>
                        <td>{{flight.title}}</td>
                        <td>{{flight.text}}</td>
                        <td>{{flight.price}}</td>
                        <td>{{flight.slug}}</td>
                        <td>{{flight.category}}</td>
                        <td class="td-actions text-right">                             
                            <a type="button" class="btn btn-success btn-just-icon btn-sm "
                            style="margin-left:10px;">
                                <i class="material-icons">Edit</i>
                            </a>

                            <button type="button" rel="tooltip" class="btn btn-danger btn-just-icon btn-sm" data-original-title="" title="" style="margin-left:10px;">
                                <i class="material-icons">Delete</i>
                            </button>
                        </td>
                    </tr>