0
我正在使用「ng2-smart-table」。在 「NG2-智能table.component.ts」 我有如何使用angular2將服務響應設置爲@Input聲明的變量
import {
Component, Input, Output, SimpleChange, EventEmitter,
OnChanges
} from '@angular/core';
import { Grid } from './lib/grid';
import { DataSource } from './lib/data-source/data-source';
import { Row } from './lib/data-set/row';
import { deepExtend } from './lib/helpers';
import { LocalDataSource } from './lib/data-source/local/local.data-source';
import { ViewListCustomersComponent} from '../app/view-list-customers/view-list-customers.component';
import any = jasmine.any;
@Component({
selector: 'ng2-smart-table',
styles: [require('./ng2-smart-table.scss')],
template: require('./ng2-smart-table.html')
//template: require('../app/view-list-customers/ng2-smart-table.html')
})
export class Ng2SmartTableComponent implements OnChanges {
@Input() source: any;
@Input() settings: Object = {};
@Output() public rowSelect: EventEmitter<any> = new EventEmitter<any>();
@Output() public userRowSelect: EventEmitter<any> = new EventEmitter<any>();
@Output() public delete: EventEmitter<any> = new EventEmitter<any>();
@Output() public edit: EventEmitter<any> = new EventEmitter<any>();
@Output() public create: EventEmitter<any> = new EventEmitter<any>();
@Output() public deleteConfirm: EventEmitter<any> = new EventEmitter<any>();
@Output() public editConfirm: EventEmitter<any> = new EventEmitter<any>();
@Output() public createConfirm: EventEmitter<any> = new EventEmitter<any>();
@Input() defaultSettings:Object;
@Input() customerDetailsItem : Object;
data:Array<string>;
protected grid: Grid;
constructor(public viewListCustomersComponent:ViewListCustomersComponent) {
console.log("==isEdit======== "+this.source);
}
ngOnChanges(changes: {[propertyName: string]: SimpleChange}): void {
console.log("=================ngOnChanges=================");
if (this.grid) {
if (changes['settings']) {
this.grid.setSettings(this.prepareSettings());
}
if (changes['source']) {
this.grid.setSource(this.source);
}
} else {
this.initGrid();
}
}
onAdd(event): boolean {
console.log("=================onAdd=================");
event.stopPropagation();
if (this.grid.getSetting('mode') === 'external') {
this.create.emit({
source: this.source
});
} else {
this.grid.createFormShown = true;
}
return false;
}
onUserSelectRow(row: Row): void {
console.log("=================onUserSelectRow=================");
this.grid.selectRow(row);
this.userRowSelect.emit({
data: row.getData(),
source: this.source
});
this.onSelectRow(row);
}
onSelectRow(row: Row): void {
console.log("=================onSelectRow=================");
this.grid.selectRow(row);
this.rowSelect.emit({
data: row.getData(),
source: this.source
});
}
onEdit(row: Row, event): boolean {
console.log("=================onEdit=================");
event.stopPropagation();
this.onSelectRow(row);
if (this.grid.getSetting('mode') === 'external') {
this.edit.emit({
data: row.getData(),
source: this.source
});
} else {
this.grid.edit(row);
}
return false;
}
onDelete(row: Row, event): boolean {
console.log("=================onDelete=================");
event.stopPropagation();
if (this.grid.getSetting('mode') === 'external') {
this.delete.emit({
data: row.getData(),
source: this.source
});
} else {
this.grid.delete(row, this.deleteConfirm);
}
return false;
}
onCreate(row: Row, event): boolean {
console.log("=================onCreate=================")
event.stopPropagation();
this.grid.create(row, this.createConfirm);
return false;
}
onSave(row: Row, event): boolean {
console.log("=================onSave================="+row.getCells()[0].getValue());
event.stopPropagation();
console.log("dddddddddddd "+this.viewListCustomersComponent.onCustomerEdit(row.getCells()));
//this.grid.save(row, this.editConfirm);
return false;
}
onActive(row: Row, event): boolean {
console.log("=================onActive=================");
event.stopPropagation();
this.grid.save(row, this.editConfirm);
return false;
}
protected initGrid(): void {
this.source = this.prepareSource();
this.grid = new Grid(this.source, this.prepareSettings());
this.grid.onSelectRow().subscribe((row) => this.onSelectRow(row));
}
protected prepareSource(): DataSource {
if (this.source instanceof DataSource) {
return this.source;
} else if (this.source instanceof Array) {
return new LocalDataSource(this.source);
}
return new LocalDataSource();
}
protected prepareSettings(): Object {
console.log("============this.settings======="+this.settings)
return deepExtend({}, this.defaultSettings, this.settings);
}
}
，並在我的app.compont.html我寫
<ng2-smart-table [settings]="settings" [source]="data" [defaultSettings]="defaultSettings" [customerDetailsItem]="customerDetailsItem"></ng2-smart-table>
，在我app.componebt.ts文件有
data : CustomerDetailsItem[];
constructor(public service:ViewListCustomerServiceService)
{
this.service.getCustomerItemList().subscribe(lst =>this.data=(lst));
}
但在瀏覽器控制檯我得到空桌子excption
EXCEPTION: Error in ./appComponent class appComponent - inline template:70:100 caused by: 'undefined' is not a function (evaluating 'source.setPaging(1, this.getSetting('pager.perPage'), false)')
main.bundle.js：50314 ORIGINAL EXCEPTION：'undefined'不是函數（評估'source.setPaging（1，this.getSetting（'pager.perPage'），false）'） main.bundle.js：50321
如果我將靜態值傳遞給「數據」變量，那麼我得到的表與默認數據。 例如。
data=[
{
id:1,
"name":"Customer 1",
"details":"Customer 1",
"active":false
},
{
"id":2,
"name":"Customer 2",
"details":"Customer 2 details goes here",
"active":false
}];
我也檢查了我的服務響應與上面相同。
請問我該怎麼辦。
這裏是我的app.Component.service.ts代碼
@Injectable()
export class appComponentService {
constructor(private http:Http) { }
getCustomerItemList():Observable<CustomerDetailsItem[]> {
let response = this.http.get(`${AppSettings.BACK_ENDPOINT}/nextrow/list-customers/?access_token=`+sessionStorage.getItem("access_token"));
let customerDetailItems = response.map(mapCustomerItems);
return customerDetailItems;
}
}
function mapCustomerItems(response:Response):CustomerDetailsItem[] {
let customerDetailsItem =response.json();
return customerDetailsItem;
}
NG2-智能table.html
<div class="ng2-smart-table-container">
<tr class="ng2-smart-titles" *ngIf="!grid.getSetting('hideHeader')">
<th *ngIf="grid.showActionColumn('left')" class="ng2-smart-actions">
<div class="ng2-smart-title">{{ grid.getSetting('actions.columnTitle') }}</div>
</th>
<th *ngFor="let column of grid.getColumns()" class="ng2-smart-th {{ column.id }}" [ngClass]="column.class">
<div class="ng2-smart-title">
<ng2-smart-table-title [source]="source" [column]="column"></ng2-smart-table-title>
</div>
</th>
<th *ngIf="grid.showActionColumn('right')" class="ng2-smart-actions">
<div class="ng2-smart-title">{{ grid.getSetting('actions.columnTitle') }}</div>
</th>
</tr>
<tr *ngIf="grid.createFormShown">
<td class="ng2-smart-actions">
<a href="#" class="ng2-smart-action ng2-smart-action-add-create" [innerHTML]="grid.getSetting('add.createButtonContent')" (click)="onCreate(grid.getNewRow(), $event)"></a>
<a href="#" class="ng2-smart-action ng2-smart-action-add-cancel" [innerHTML]="grid.getSetting('add.cancelButtonContent')" (click)="grid.createFormShown = false;"></a>
</td>
<td *ngFor="let cell of grid.getNewRow().getCells()">
<ng2-smart-table-cell [cell]="cell" [inputClass]="grid.getSetting('add.inputClass')" (edited)="onCreate(grid.getNewRow(), $event)"></ng2-smart-table-cell>
</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of grid.getRows()" (click)="onUserSelectRow(row)" class="ng2-smart-row" [ngClass]="{selected: row.isSelected}">
<td *ngIf="!row.isInEditing && grid.showActionColumn('left')" class="ng2-smart-actions">
<a href="#" *ngIf="grid.getSetting('actions.edit')" class="ng2-smart-action ng2-smart-action-edit-edit" [innerHTML]="grid.getSetting('edit.editButtonContent')" (click)="onEdit(row, $event)"></a>
<a href="#" *ngIf="grid.getSetting('actions.delete')" class="ng2-smart-action ng2-smart-action-delete-delete" [innerHTML]="grid.getSetting('delete.deleteButtonContent')" (click)="onDelete(row, $event)"></a>
</td>
<!--<td *ngIf="row.isInEditing" class="ng2-smart-actions">
<a href="#" class="ng2-smart-action ng2-smart-action-edit-save" [innerHTML]="grid.getSetting('edit.saveButtonContent')" (click)="onSave(row, $event)"></a>
<a href="#" class="ng2-smart-action ng2-smart-action-edit-cancel" [innerHTML]="grid.getSetting('edit.cancelButtonContent')" (click)="row.isInEditing = false;"></a>
</td>-->
<td *ngFor="let cell of row.getCells()">
<ng2-smart-table-cell [cell]="cell" [mode]="grid.getSetting('mode')" [inputClass]="grid.getSetting('edit.inputClass')" (edited)="onSave(row, $event)"></ng2-smart-table-cell>
</td>
<td *ngIf="row.isInEditing" class="ng2-smart-actions">
<a href="#" class="ng2-smart-action ng2-smart-action-edit-save" [innerHTML]="grid.getSetting('edit.saveButtonContent')" (click)="onSave(row, $event)"></a>
<a href="#" class="ng2-smart-action ng2-smart-action-edit-cancel" [innerHTML]="grid.getSetting('edit.cancelButtonContent')" (click)="row.isInEditing = false;"></a>
</td>
<td *ngIf="!row.isInEditing && grid.showActionColumn('right')" class="ng2-smart-actions">
<button><a href="#" *ngIf="grid.getSetting('actions.edit')" class="ng2-smart-action ng2-smart-action-edit-edit" [innerHTML]="grid.getSetting('edit.editButtonContent')" (click)="onEdit(row, $event)"></a></button>
<button><a href="#" *ngIf="grid.getSetting('actions.delete')" class="ng2-smart-action ng2-smart-action-delete-delete" [innerHTML]="grid.getSetting('delete.deleteButtonContent')" (click)="onDelete(row, $event)"></a></button>
<button><a href="#" *ngIf="grid.getSetting('actions.activate')" class="ng2-smart-action ng2-smart-action-delete-delete" [innerHTML]="grid.getSetting('activate.activateButtonContent')" (click)="onActive(row, $event)"></a></button>
</td>
<td>Yogesh</td>
</tr>
<tr *ngIf="grid.getRows().length == 0">
<td [attr.colspan]="grid.getColumns().length + (grid.getSetting('actions.add') || grid.getSetting('actions.edit') || grid.getSetting('actions.delete'))">test {{ grid.getSetting('noDataMessage') }}</td>
</tr>
</tbody>
構造函數（public service：ViewListCustomerServiceService）是否正確？或者可能是構造函數（公共服務：ViewListCustomerService）呢？ – Ismaestro
你能否提供更多的'Ng2SmartTableComponent'代碼，等等。 – Batajus
我添加了Ng2SmartTableComponent的所有代碼。請檢查 –