Angular 8 - проблема с GET-запросом для файла json

Question

Пожалуйста, помогите, я пытаюсь поднять мою django веб-страницу с помощью REST API и использовать Angular FrontEnd, где я начинаю. Я следовал некоторым учебникам о том, как использовать REST API, и как-то я ошибаюсь там. Браузер не показывает ошибок при запросе контента, но он не приходит. Я ценю каждую помощь .....

здесь мы go 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 { } 

Это странно, когда я получаю json через localhost: 8000 / uslugi, и это должно быть что-то не так в 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

Имя наблюдаемой переменной (которая хранит объект из API) должно совпадать с именем в шаблоне html, аналогично (вылет):

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

Answer 2

Чтобы сделать http-вызов, вам нужно подписаться на него.

В вашем компоненте:

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

Правильный способ - отписаться, есть много способов сделать это. Это один из способов, который требует только 'rx js' и операторов. Итак, то, что вы делаете, по сути так:

@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-вызов для вас