0
スイムレーンngx-datatableの助けを借りてダイナミックデータテーブルを作成しようとしています。私のデータはバックエンドから来て、私は自分のコンソールでデータを見ることができます。テーブルの中でレンダリングされる列はほとんどなく、そのうちのいくつもはありません。私は、なぜ列のいくつかがレンダリングされない理由を知ることができません。どんな助けでも大歓迎です。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
});
}
}