Trying to put data into a table and having trouble

Daniel Fabre 0
Viewed 37

So I've already come here asking for help with this project. The thing is, everything is a mess, there are severall functions that do the same thing.

But anyways, my problem now is that I'm trying to fecth some data coming from firebase and update a table.

 <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've used material to do it so, using data from interfaces created for the table are no issue, but when I try to fetch info pro my DB is useless.

My component ts looks like this:

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 used on service is this one:

getUsersLocal(): Observable<AdminUser[]> {
    const booksRef = collection(this.firestore, 'admin-roles');
    return collectionData(booksRef, { idField: 'id' }) as Observable<AdminUser[]>;
  }

I've tried to debug it, put some console.logs into it but i'cant wrap my mind around my mistake here.

enter image description here

I logged,to check if the getUsersLocal() was working and it returns the array of data that i want to put on the table, is it something wrong with my initializeTable()??

What can i do to fix this

material-ui google-cloud-firestore typescript angular
1 Answers

I also had problems with adding data to my tablet, but my problem was precisely that I was not filling the matrix correctly.

try this:

      dataSource = new MatTableDataSource<Model>();
      @ViewChild(MatPaginator, {static: true})
      paginator!: MatPaginator;
      @ViewChild(MatSort, {static: true})
      sort!: MatSort;
        
          ngOnInit(): void {
            this.getAll();
            this.dataSource.paginator = this.paginator;
            this.dataSource.sort = this.sort;
          }
        
             getAll() {
                this.service.get().subscribe((data: Model[]) => {
             //the data must go in "datasource.data"
                  this.dataSource.data = [...data];  // you practically have to replace the array        
                });
              }

I hope it helps you, regards

Miguel Callejas0
Related