Я не получаю данные шоу в datatable angular 2.x

Question

хорошо, я делаю веб-приложение с django и angular, API хороший, но я новичок ie с angular, и я не понимаю, что я не прав.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';    
@Injectable({
  providedIn: 'root'
})
export class ListarPersonasService {
  public personas:any = null;
  constructor(private http: HttpClient) { }

  public obtenerPersonas() {
    const url = 'http://127.0.0.1:8000/api/v1.0/abogado/personas';
    return this.http.get(url).subscribe(
      res => {
        this.personas = res;
        console.log(res);           
      }
    ); 
  }
}   

это моя служба, на компоненте вызывается служба, которая делает запрос, и сохраняет результат в переменной datasource

import { Component, OnInit } from '@angular/core';
import { ListarPersonasService } from "../servicios/listar-personas.service";
@Component({
  selector: 'app-listar-personas',
  templateUrl: './listar-personas.component.html',
  styleUrls: ['./listar-personas.component.css']
})
export class ListarPersonasComponent implements OnInit {
  displayedColumns: string[] = ['documento','nombre', 'apellido'];
  dataSource : any;
  constructor(private listar:ListarPersonasService) { }
  ngOnInit() {
    this.dataSource = this.listar.obtenerPersonas()
  }
}

, а здесь это html.

<table mat-table [dataSource]="persona" class="mat-elevation-z8">
  <ng-container matColumnDef="documento">
    <th mat-header-cell *matHeaderCellDef>documento</th>
    <td mat-cell *matCellDef="let element">{{element.documento}}</td>
  </ng-container>
  <ng-container matColumnDef="nombre">
    <th mat-header-cell *matHeaderCellDef> Nombre</th>
    <td mat-cell *matCellDef="let element"> {{element.nombre}}</td>
  </ng-container>
  <ng-container matColumnDef="apellido">
    <th mat-header-cell *matHeaderCellDef> Apellido</th>
    <td mat-cell *matCellDef="let element"> {{element.apellido}}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> 

вот результат в консоли

{count: 2, next: null, previous: null, results: Array(2)}
 count: 2
 next: null
 previous: null
 results: Array(2)
  0: {id: 2, documento: 200, nombre: "martin", apellido: "De Francisco", nacimiento:"2020-02-05", …}
  1: {id: 1, documento: 205, nombre: "rafael", apellido: "escalona",nacimiento:"2020-02-05", …}
 length: 2
 __proto__: Array(0)__proto__: Object
 client:52 [WDS] Live Reloading enabled.

Я ценю любые предложения, которые могут мне помочь.

Answer 1

Я проверил ваш код. В вашем коде есть несколько ошибок.

1. Используйте это

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

вместо

<table mat-table [dataSource]="persona" class="mat-elevation-z8">

this.personas объявите в своем сервисе, но вы используете эту переменную внутри вашей html части. Таким образом, вам нужно подписать свой API внутри вашего компонента следующим образом ...

  //In service
  public obtenerPersonas() {
    const url = 'http://127.0.0.1:8000/api/v1.0/abogado/personas';
    return this.http.get(url);
  }

  //in your-component.ts file
  this.listar.obtenerPersonas().subscribe(res => {
        this.dataSource = res;
        console.log(res);           
  }); 

и, наконец, если вы не установили весь материал, который вы используете прямо сейчас, необходимо установить его первый. Вы можете увидеть следующий Angular материал официальный пример. Нажмите здесь

Я надеюсь, что это полезно для вас. :)

Answer 2

обслуживание. Должно быть без подписки. В противном случае он возвращает подписку вместо Observable.

public obtenerPersonas() {
    const url = 'http://127.0.0.1:8000/api/v1.0/abogado/personas';
    return this.http.get(url); 
  }

Компонент. Сделайте так:

ngOnInit() {
  this.listar.obtenerPersonas().subscribe(data => {
    // OR ADD HERE SOME NECESSARY DATA TRANSFROMATION AND DATA VALIDATION
    this.dataSource = data.personas;
  })
}

В шаблоне:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

Итак, logi c это: - Сервис API имеет метод, который возвращает только Observable - Компонент подписывается на эту наблюдаемую и angular выполняет HTTP-запрос - вы получаете «персона» из ответа и устанавливаете его как источник данных для вашей таблицы