I've previously sought help on this project and I'm still facing challenges. The code is messy with duplicate functions, making it hard to manage.
Currently, my main issue is fetching data from Firebase and updating a table with it.
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="adminEmail">
<th mat-header-cell *matHeaderCellDef> Email </th>
<td mat-cell *matCellDef="let admin"> {{adminUser.adminEmail}} </td>
</ng-container>
<ng-container matColumnDef="adminNome">
<th mat-header-cell *matHeaderCellDef> Nome </th>
<td mat-cell *matCellDef="let admin"> {{adminUser.adminNome}} </td>
</ng-container>
<ng-container matColumnDef="role">
<th mat-header-cell *matHeaderCellDef> Role </th>
<td mat-cell *matCellDef="let admin"> {{adminUser.role}} </td>
</ng-container>
<ng-container matColumnDef="update">
<th mat-header-cell *matHeaderCellDef> Alterar </th>
<td mat-cell *matCellDef="let admin">
<a mat-icon-button (click)="editUser(admin)">
<mat-icon>edit</mat-icon>
</a>
</td>
</ng-container>
<ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef> Apagar </th>
<td mat-cell *matCellDef="let admin">
<button mat-icon-button (click)="deleteUser(admin)">
<mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>
</mat-paginator>
</div>
I'm using material design for this task, so working with data from interfaces for the table is not an issue. However, fetching information from the database is proving to be problematic.
Here's a snippet of my component ts file:
adminUser: any = {
adminNome: '',
adminEmail: '',
role: ''
}
allAdmins: AdminUser[] = [];
selectedAdmins: any = [];
submitted!: boolean;
displayedColumns: string[] = ['adminEmail', 'adminNome', 'role', 'update', 'delete'];
dataSource = new MatTableDataSource<AdminUser>(this.allAdmins);
@ViewChild(MatPaginator) paginator!: MatPaginator;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
constructor(
private adminService: AdminUserService,
private dinamicaService: DinamicaService,
private messageService: MessageService,
private confirmationService: ConfirmationService,
private router: Router) {
}
ngOnInit(): void {
this.inputName = <HTMLInputElement>document.querySelector('#dinName');
this.inputDesc = <HTMLInputElement>document.querySelector('#dinDesc');
console.log("oi")
this.loadAdmins();
console.log("oi")
this.loading = false;
}
initializeTable(): void {
this.adminService.getUsersLocal().subscribe(admin => {
this.allAdmins = admin;
this.dataSource = new MatTableDataSource<AdminUser>(this.allAdmins);
this.dataSource.paginator = this.paginator;
});
}
loadAdmins() {
this.adminService.getUsersLocal().subscribe(res => { //Mudar aqui
this.allAdmins = res
console.log(this.allAdmins)
})
}
The function in the service used to fetch data is as follows:
getUsersLocal(): Observable<AdminUser[]> {
const booksRef = collection(this.firestore, 'admin-roles');
return collectionData(booksRef, { idField: 'id' }) as Observable<AdminUser[]>;
}
I've tried debugging the code with console.log statements but can't seem to identify the issue. The getUsersLocal() function returns the data array, so I suspect there might be a problem with the initializeTable() function.
https://i.sstatic.net/hjinL.png
What can I do to rectify this situation?