Connection Angular 10 + Django Api Rest没有渲染对象答案

【问题标题】：Conection Angular 10 + Django Api Rest no render objetcsConnection Angular 10 + Django Api Rest没有渲染对象
【发布时间】：2020-12-23 01:30:20
【问题描述】：

我正在尝试使用 Django rest + angular 10，我将在浏览器中显示提供程序列表，有人可以向我解释为什么我的 django api rest 对象没有呈现吗？出现在控制台中，但不在 html 中。我使用 angular 10、django 2.7、cors 和我的本地主机。这是我的代码。

// app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

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

//app.component.html

<div *ngFor='let provider of providers'>
    <h2>{{ provider.name | uppercase }}</h2>
    <p>{{ provider.procedence }}</p>
    <p>{{ provider.email }}</p>
    <p>{{ provider.telephone }}</p>
</div>

// app.component.ts

import { Component, OnInit } from '@angular/core';
import { ProviderService } from './provider.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'conexion';
  providers: any[] = [];

  constructor(
    protected ProviderService: ProviderService
  ) {
  }

  ngOnInit() {
    this.ProviderService.getProviders()
    .subscribe(
      (data) => { // Success
        this.providers = data['results'];
        console.warn(data)
      },
      (error) => {
        console.error(error);
      }
    );
  }
}

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule} from '@angular/common/http';
import { ProviderService } from './provider.service';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [ProviderService],
  bootstrap: [AppComponent]
})
export class AppModule { }

// provider.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ProviderService {

  constructor(protected http: HttpClient) { }

  getProviders() {
    return this.http.get('http://127.0.0.1:8000/provider?format=json');
  }
}

【问题讨论】：

标签： python django angular django-rest-framework

【解决方案1】：

调试使用Async 并学习如何使用它，它的代码和错误更少。 Smart/Dumb 组件和 OnPush 更改检测

定义

public providers$: Observable<any>;

ngOnInit

this.providers$ = this.ProviderService.getProviders();

模板

{{ providers$ | async | json }}

【讨论】：