Angular NGX Datatable data not set

Question

I'm new on angular, i try to set data from the module.

ngOnInit() {
    this.populate();
  }

  public populate() {
    this.productService.getAllProduct('6f453f89-274d-4462-9e4b-c42ae60344e4').subscribe(prod => {
      this.products = prod.map(prx => prx.request);
      console.log(this.products);
    });

html

    <ngx-datatable style="height: 500px; box-shadow: none" class="material fullscreen" [columnMode]="'force'"
                [headerHeight]="50" [footerHeight]="50" [rowHeight]="60" [scrollbarV]="true" [rows]="products">
                <ngx-datatable-column name="name">
                    <ng-template ngx-datatable-header-template>
                        Name
                    </ng-template>
                </ngx-datatable-column>
</ngx-datatable>

but the data doesn't show. i try to check it on console.log, the data appear on console.log(this.products). i don't know what's wrong on it. i added some code on my constructor.

constructor(private productService: ProductService, public modalService: NgbModal) {
    this.products = [new Product()];
  }

the code work, but the datatable show an empty row before the data filled.

Are you using @swimlane-ngxdatatable or ngx-datatable? – Pallamolla Sai Nov 26 '19 at 06:19 — Pallamolla Sai, Nov 26 '19 at 06:19

score 0 · Answer 1 · answered Nov 26 '19 at 08:30

Does "name" exists as a property on the products?

If not, you can either change the name="name" attribute to the correct prop or you need add something like this (with differenProp being whatever the correct prop holding the name is):

...
<ng-template ngx-datatable-header-template>
  Name
</ng-template>
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
  {{ row.differenProp }}
</ng-template>
...

Angular NGX Datatable data not set

1 Answers1