我在使用ngx-datatable时遇到问题,我不知道为什么。在本地它可以正常工作,但是当我将其上传到我的测试服务器后,它开始给我这个错误,而不是渲染表数据。
这是错误:
main.f7a34d8496a7f0ff9898.js:1
ERROR TypeError: t.slice is not a function
at t.set [as rows] (main.f7a34d8496a7f0ff9898.js:1)
at tv (main.f7a34d8496a7f0ff9898.js:1)
at main.f7a34d8496a7f0ff9898.js:1
at main.f7a34d8496a7f0ff9898.js:1
at kv (main.f7a34d8496a7f0ff9898.js:1)
at m_ (main.f7a34d8496a7f0ff9898.js:1)
at main.f7a34d8496a7f0ff9898.js:1
at Object.updateDirectives (main.f7a34d8496a7f0ff9898.js:1)
at Object.p_ [as updateDirectives] (main.f7a34d8496a7f0ff9898.js:1)
at Ev (main.f7a34d8496a7f0ff9898.js:1)
从错误中我猜测这与ngx-datatable的rows
部分有关,因此代码如下:
<ngx-datatable class="material" *ngIf="allClients" [rows]="allClients?.content" [columnMode]="'force'" [rowHeight]="50" [scrollbarH]="true"
[headerHeight]="50" [footerHeight]="50" (activate)='selectRow($event)' [externalPaging]="true" (page)='setPage($event)' [count]="allClients.totalElements"
[offset]="allClients.pageable?.pageNumber" [limit]="allClients.size" [messages]="{emptyMessage:'Andmed puuduvad.'}">
<ngx-datatable-column prop="companyName" name="NIMI" width="80">
<ng-template let-row="row" ngx-datatable-cell-template>
<button routerLink="/clients/{{row.id}}" type="button" class="btn btn-link btn-sm p-0">{{row.companyName}}</button>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column prop="firmRegNo" name="REG NR" width="80">
<ng-template let-row="row" ngx-datatable-cell-template>
{{row?.firmRegNo}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column prop="address" name="AADRESS">
<ng-template let-row="row" ngx-datatable-cell-template>
{{row?.address}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column prop="clientContract.contractNo" name="LEPINGU NR" width="50">
<ng-template let-row="row" ngx-datatable-cell-template>
{{row?.clientContract?.contractNo}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="TASU" prop="clientContract.monthlyPay" width="50">
<ng-template let-row="row" ngx-datatable-cell-template>
{{row?.clientContract?.monthlyPay | currency:'EUR' }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="STAATUS" prop="status" width="100">
<ng-template let-row="row" ngx-datatable-cell-template>
{{row?.status | status}}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
所以行是allClients?.content
,这是应该的数组。
以下是用于呈现表的示例服务器响应。有什么想法吗?
{
"content": [
{
"id": 25,
"companyName": "Selver OÜ",
"firmRegNo": 12312323,
"address": "Lai 12, Tartu, Tartu",
"clientName": "1231231",
"phoneOne": 13371337,
"phoneTwo": 13371337,
"email": "heiko@bitweb.ee",
"explanation": "1231231",
"clientContract": {
"id": 4,
"contractNo": 123,
"startDate": "2019-10-22T21:00:00.000+0000",
"endDate": null,
"monthlyPay": 1231,
"clientContractFiles": [],
"permanentContract": true,
"archived": false
},
"status": "active",
"objects": []
},
{
"id": 6,
"companyName": "Coop OÜ",
"firmRegNo": 521123121,
"address": "Lai 14, Tartu, Tartu",
"clientName": "Mari Maasikas",
"phoneOne": 58586161,
"phoneTwo": 6809600,
"email": "selver@hotmail.com",
"explanation": "Testing123",
"clientContract": null,
"status": "temporarily_inactive",
"objects": []
},
{
"id": 11,
"companyName": "Prisma OÜ",
"firmRegNo": 374121126,
"address": "Lai 13, Tartu, Tartu",
"clientName": "Mari Maasikas",
"phoneOne": 58586161,
"phoneTwo": 6809600,
"email": "selver@hotmail.com",
"explanation": "Testing123",
"clientContract": null,
"status": "inactive",
"objects": []
}
],
"pageable": {
"sort": {
"sorted": true,
"unsorted": false
},
"offset": 0,
"pageSize": 10,
"pageNumber": 0,
"paged": true,
"unpaged": false
},
"totalPages": 3,
"totalElements": 25,
"last": false,
"size": 10,
"number": 0,
"numberOfElements": 10,
"sort": {
"sorted": true,
"unsorted": false
},
"first": true
}