I am using Symfony as the Backend and Angular as the Frontend. I am attempting to showcase a list of all users from my postgresql database in a table. However, the browser only displays the information passed within the tags.
 https://i.sstatic.net/idcNk.png 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 anticipate that executing getUsers() will result in all registered users from the database being displayed.