Angular 12 - я получаю данные из бэкенда в компонент, но они не отображаются в моем HTML представлении

Со вчерашнего дня я пытаюсь понять, что я сделал не так. Я хочу передавать данные с бэкенда django на фронтенд angular. Предположительно, бэкенд отправляет данные. Я могу видеть это с помощью этой команды:

[18/Mar/2022 11:41:46] "GET /list-users/ HTTP/1.1" 200 82

Мой front end делает запрос, и мой backend отвечает также. Также, я могу видеть результаты в console.log здесь:

    Array(5) [ "admin@lab.com", "lab@lab.com", "lab2@lab.com", "lab3@lab.com", "lab4@lab.com" ]
​
0: "admin@lab.com"
​
1: "lab@lab.com"
​
2: "lab2@lab.com"
​
3: "lab3@lab.com"
​
4: "lab4@lab.com"
​
length: 5
​
<prototype>: Array []
main.js:164:80

Я думаю, все правильно до сих пор. Вот мой код компонента и код html-компонента.

import {Component, OnInit} from '@angular/core';
import { SharedService } from 'app/shared.service';



@Component({
  selector: 'app-regular',
  templateUrl: './regular.component.html',
  styles: []
})

export class RegularComponent implements OnInit {

  userlists: any;


  constructor(private service: SharedService) { }

  ngOnInit() {
    this.getUserlist();
      }

      getUserlist() {
        let observable = this.service.getUsersList();
        observable.subscribe((data) => { this.userlists = data; console.log(data); return data; }); }


}

html компонент

    <div class="card main-card mb-3">
  <div class="card-header">
  </div>
  <table class="table table-striped">
    <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Date</th>
      <th scope="col">Patient Code</th>
      <th scope="col">Status</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let user of userlists">
      <td>{{user.email}}</td>
      <td>{{user.email}}</td>
    </tr>
    </tbody>
  </table>
</div>

my service.ts

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

@Injectable({
  providedIn: 'root'
})

export class SharedService {
  API_URL: string = "http://127.0.0.1:8000/";
  
  constructor(private http:HttpClient) { }
  
  getUsersList() {
    return this.http.get(this.API_URL + 'list-users/')
  }


}

Я провел много исследований, чтобы понять, что не так или чего не хватает. И все равно не могу понять. Не могли бы вы помочь мне, пожалуйста? Спасибо. Не стесняйтесь спрашивать любую необходимую информацию для решения этой проблемы.

Вернуться на верх