未设置 Angular NGX 数据表数据答案

【问题标题】：Angular NGX Datatable data not set未设置 Angular NGX 数据表数据
【发布时间】：2019-11-26 03:21:00
【问题描述】：

我是 Angular 新手，我尝试从模块中设置数据。

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>

但数据不显示。我尝试在console.log 上检查它，数据出现在console.log(this.products) 上。我不知道它有什么问题。我在构造函数中添加了一些代码。

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

代码工作，但数据表在数据填充之前显示一个空行。

【问题讨论】：

你使用的是@swimlane-ngxdatatable还是ngx-datatable？

标签： angular typescript ngx-datatable

【解决方案1】：

“名称”是否作为产品属性存在？

如果没有，您可以将 name="name" 属性更改为正确的道具，或者您需要添加类似这样的内容（differenProp 是包含名称的正确道具）：

...
<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>
...

【讨论】：