Return information from a database with angular

Question

J'utilise Symfony comme Backend et Angular comme Frontend. J'essaie d'afficher la liste de tous les utilisateurs de ma base de données postgresql dans un tableau. Le navigateur affiche uniquement l'information passée dans la balise .

 here is the eb_user.ts file where I declared the user

import {EbRole} from './role';

export class eb_user {
    id: number;
    nom: string;
    prenom: string;
    tel: string;
    mail: string;
    domaine: string;
    x_eb_role : string;


    constructor(){
        this.id = null;
        this.nom = '';
        this.prenom = '';
        this.tel = '';
        this.mail = '';
        this.domaine= null;
        this.x_eb_role = null;
    }

}

user.component.ts file:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription, from, BehaviorSubject } from 'rxjs';
import { CreateService } from 'src/app/services/create.service';
import { MatTableDataSource } from '@angular/material';
import {DataSource} from '@angular/cdk/collections';
import {Observable, of} from 'rxjs';
import 'rxjs';
import { eb_user } from 'src/app/classes/eb_user';
import { HttpClient } from '@angular/common/http';
import { Statique } from 'src/app/utils/Statique';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})
export class UsersComponent implements OnInit, OnDestroy {

    private users: eb_user[];
    userSubscription: Subscription;

  constructor(private createService: CreateService,
              private http: HttpClient) {
       }

  getUsers() : void{
    this.createService.getUsers()
        .subscribe(users => this.users = users);
  }

  ngOnInit(){
    this.users = [];

  }

  ngOnDestroy(){
    console.log(this.users)
  }

}

users.component.html file:

<ul class="list-group"   style= "margin-top: 150px;">
  <li style="display: block;"><a routerLink="/create-user"> <button class="btn btn-primary">Create User</button></a></li><br>
</ul>

<table style="width: 100%;">
  <tr>
    <th> id</th>
    <th> nom</th>
    <th>prénom</th>
    <th>tel</th>
    <th>email</th>
    <th>domaine</th>
  </tr>
  <tr li class="list-group-item" *ngFor="let user of users">
    <td>{{user.id}}</td>
    <td>{{user.nom}}</td>
    <td>{{user.prenom}}</td>
    <td>{{user.tel}}</td>
    <td>{{user.mail}}</td>
    <td>{{user.domaine}}</td>
  </tr>
</table>

I expect all users registered in the database to be displayed when doing getUsers ()

Answer 1

根据您的代码，将通过以下方法从数据库请求所有用户：

getUsers();

但是您从不称呼它。最好放下代码：

this.createService.getUsers()
        .subscribe(users => this.users = users);

到构造函数。这样数据将被自动下载。

Answer 2

从用户声明中删除私有，然后它应该可以工作。

替换此：

private users: eb_user[];

通过这个：

users: eb_user[];

然后通过以下命令更新您的构造函数：-

constructor(private createService: CreateService,
              private http: HttpClient) {
   this.getUsers();
}