typescript - ngfor angular data not showing

Question

This is my code

ng-bootstrap-table.component.ts

import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   Input,
   OnInit,
   QueryList,
   ViewChildren,
} from '@angular/core';
import { Observable } from 'rxjs';
import { ApiService } from 'C:/Users/rober/Downloads/sb-admin-angular-develop/src/app/api.service';
import { Usuario } from './Usuario';

@Component({
   selector: 'sb-ng-bootstrap-table',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './ng-bootstrap-table.component.html',
   styleUrls: ['ng-bootstrap-table.component.scss'],
})
export class NgBootstrapTableComponent implements OnInit {
   @Input() pageSize = 4;

   countries$!: Observable<Country[]>;
   total$!: Observable<number>;
   sortedColumn!: string;
   sortedDirection!: string;
   usuario!:Usuario[];

   constructor(
       private apiService:ApiService,
       private router: Router
   ) {}

   ngOnInit() {
       this.apiService.getAll().subscribe(
           e=>{
               this.usuario=e;
               console.log(this.usuario);
           }
       );
   }
}

ng-bootstrap-table.component.html

<form>
    <table *ngIf="usuario">
        <tr *ngFor="let t of usuario">
          <th>{{ t.id }}</th>
        </tr>
    </table>
</form>

Any reason the data is not displayed? (The variable is not empty, I print it in the console and it has data) Capture what is displayed on the console

question from:https://stackoverflow.com/questions/65879887/ngfor-angular-data-not-showing

Answer 1

Take this post as reference, try to add trackBy inside *ngFor

ng-bootstrap-table.component.html

<form>
    <table *ngIf="usuario">
        <tr *ngFor="let item of usuario; trackBy: trackUsuario">
          <th>{{ item.id }}</th>
        </tr>
    </table>
</form>

ng-bootstrap-table.component.ts

// ...
export class NgBootstrapTableComponent implements OnInit {

    // ...

    trackUsuario(index, item){
       return item.id; 
    }

}