Django Angular 8-获取json文件请求时出现问题

请帮忙，我正试图用RESTAPI提升我的django网页，并在我开始的地方使用Angular前端。我已经学习了一些关于如何使用RESTAPI的教程，但不知何故我犯了一个错误。浏览器在请求内容时不会显示错误，但不会显示。我感谢你的每一点帮助

下面我们来看看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();

这很奇怪，因为我是通过localhost:8000/uslugi获得json的，它一定是角度错误：

[{"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}]

---

为了进行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();
}

@组件({
选择器：“应用程序usluga列表”，
templateUrl:'./usluga list.component.html'，
样式URL:['./usluga list.component.css']
})
导出类UslugaListComponent实现OnInit、OnDestroy{
uslugi：可观察；
取消订阅=新主题（）；
构造函数（私有uslugaService:uslugaService）{}
恩戈尼尼特（）{
this.loadUslugiData（）；
}
恩贡德斯特罗（）{
this.unsubscribe.next（）；
此为.unsubscribe.complete（）；
}
loadUslugiData（）{
this.uslugi=this.uslugaService.getAlluslagi（）；
this.uslugi.pipe（takeUntil（this.unsubscribe））.subscribe（）；
}

然后，应该为您进行http调用

可观察变量（存储api中的对象）名称必须与html模板中的名称相同（flightss）：

@组件({
选择器：'应用程序航班列表'，
templateUrl:'./usluga list.component.html'，
样式URL:['./usluga list.component.css']
})
导出类UslugaListComponent实现OnInit{
飞行速度：可观察；
构造函数（私有uslugaService:uslugaService）{}
恩戈尼尼特（）{
this.loadUslugisData（）；
}
loadUslugisData（）{
this.flightss=this.uslugaService.getAlluslagi（）；
}
}

在模板中：

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

{{flight.id}
{{flight.title}
{{flight.text}
{{flight.price}}
{{flight.slug}}
{{flight.category}
编辑
删除

Hi，感谢您的回答。很遗憾，这不起作用。问题在于此行的语法：

this.uslugi.pipe（takeUntil（this.unsubscribe））.subscribe（）

它突出显示takeUntil。也许应该更早声明它？您需要从rxjs/Operator导入takeUntil是的，我已经导入了。但是很好-我发现了问题：）谢谢您的参与

@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();
}

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