Question

所以我试图在swimlane ngx-datatable的帮助下创建一个动态数据表。我的数据来自后端，我可以在控制台上看到数据。很少有列在表中呈现，其中很少没有。我无法找出为什么有些列没有渲染。非常感谢任何帮助。

以下是行数据

之一

clientname , id, drugsource, edit正在呈现，但medication_name , mapping_comment , strength不是。

HTML：

<ngx-datatable 
class="material"
[headerHeight]="50"

[columnMode]="'force'"
[footerHeight]="50"
[rowHeight]="'auto'"
[rows]="rows"
[columns]="columns"
[loadingIndicator]="loadingIndicator"
[externalPaging]="true"
[count]="page.count"
[offset]="page.pageNumber"
[limit]="page.size"
(page)='setPage($event)'
>


<ngx-datatable-column name="clientname">
  <ng-template ngx-datatable-cell-template let-value="value">
    {{value}}
  </ng-template>
</ngx-datatable-column>

<ngx-datatable-column name="medication_name">
  <ng-template ngx-datatable-cell-template let-value="value">
    {{value}}
  </ng-template>
</ngx-datatable-column>

<ngx-datatable-column name="edit">
  <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
    <span
      title="Double click to edit"
      (dblclick)="editing[rowIndex + '-edit'] = true"
      *ngIf="!editing[rowIndex + '-edit']">
      {{value}}
    </span>
    <md-input-container *ngIf="editing[rowIndex+ '-edit']" >
          <input mdInput autofocus   placeholder="Search drug" [mdAutocomplete]="auto" [formControl]="drug" showPanel="false">
        </md-input-container>

        <md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn" >

          <md-option *ngFor="let drug of filteredDrugs " [value]="drug" style="border-bottom: 1px solid #3f51b5; line-height : 30px ; height :10%">
            <span style="font-size : 12px;font-family : verdana">
                <strong>Drugname </strong> : {{ drug.drugname}} <br/>
                <strong> NDC </strong> : {{ drug.ndc}} <br/>
                <strong> Strength </strong> : {{ drug.strength}} <br/>
            </span>  
          </md-option>
        </md-autocomplete>

  </ng-template>
</ngx-datatable-column>
</ngx-datatable>

TS ：

import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import { GetData } from '../main/main.service';
import { Observable } from 'rxjs/Observable';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-data-table-new',
  templateUrl: './data-table-new.component.html',
  styleUrls: ['./data-table-new.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class DataTableNewComponent {
  @Input() filter: string;
  page : any = { 
    count : 0,
    pageNumber : 1,
    offset : 0
  };
  editing = {};
  rows = [];

  drug: FormControl;
  drugList = [];
  filteredDrugs: Observable<any>;
  id: number;
  drugDetails: any;

  loadingIndicator: boolean = true;

  columns = [];

  constructor(private getdata: GetData) {
    this.fetch((data) => {
      console.log("constructor walu ", data);
      this.rows = data;
    });
    this.drug = new FormControl();
  }

  fetch(cb) {
    // const req = new XMLHttpRequest();
    // req.open('GET', `assets/data/company.json`);

    // req.onload = () => {
    //   cb(JSON.parse(req.response));
    // };

    // req.send();
    console.log("fetch is called")
    this.getdata.getDrugDataForClient(0, 20).subscribe((data) => { 
      console.log(data); 
      data.columns.forEach((ele,index) => {
        this.columns.push({
          prop : ele,
          name : ele
        })
      });
      console.log("columns are= > ",this.columns);
      // this.columns= data.columns ;
      this.page.count =data.count ;
      this.rows = data.data;
      this.loadingIndicator = false;
      return data ;
    });
  }

  updateValue(event, cell, rowIndex) {

    /* change logic here
    console.log('inline editing rowIndex', rowIndex)
    this.editing[rowIndex + '-' + cell] = false;
    this.rows[rowIndex][cell] = event.target.value;
    this.rows = [...this.rows];
    console.log('UPDATED!', this.rows[rowIndex][cell]);
    */
  }

  ngOnInit() {
    this.drug.valueChanges
      .subscribe((drugname) => this.getdata.getDataForAutoComplete(drugname)
        .subscribe(resp => { this.filteredDrugs = resp.json() }));
  }

  displayFn(drug) {
    console.log(drug);
    this.drugDetails = drug;
    return drug == null ? drug : drug.drugname;
  }


  setPage(pageInfo){
    this.page["pageNumber"] = pageInfo.offset;
    // this.serverResultsService.getResults(this.page).subscribe(pagedData => {
    //   this.page = pagedData.page;
    //   this.rows = pagedData.data;
    // });
    this.getdata.getDrugDataForClient(pageInfo.offset, 20).subscribe((data) => { 
      console.log(data); this.page["count"] =data.count ;this.rows = data.data; this.loadingIndicator = false; return data 
    });
  }


}

Answer 1

据我所知;定义ngx-datatable-column模板意味着您要告诉ngx-datatable根据定义的模板呈现列，而不是自动呈现列。因此，从 ngx-datatable 内部删除 ngx-datatable-column 标记，并使用列的cellTemplate & headerTemplate输入应该是正确的答案。

data.columns.forEach((ele,index) => {
    this.columns.push({
        prop : ele,
        name : ele,
        cellTemplate : ...,
        headerTemplate : ...
    });
});

ngx-datatable列不呈现 - Angular

1 个答案: