如何解决如何在蚂蚁设计表中传递多个项目
这是一个包含我正在尝试使用的组件的库沙箱。
https://codesandbox.io/s/7vm68?file=/src/app/app.component.ts
我想将项目总数传递给表格,以便它呈现正确的页数。这个 nz-table
组件有一个特殊的属性 nzTotal
,我相信这正是我需要的,但是当我将它设置为 5000 时,它仍然呈现一页。
这是库中的代码:
import { Component,OnInit } from '@angular/core';
interface ItemData {
id: string;
name: string;
age: string;
address: string;
}
@Component({
selector: 'nz-demo-table-edit-cell',template: `
<button nz-button (click)="addRow()" nzType="primary">Add</button>
<br />
<br />
<nz-table #editRowTable nzBordered [nzData]="listofData">
<thead>
<tr>
<th nzWidth="30%">Name</th>
<th>Age</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of editRowTable.data" class="editable-row">
<td>
<div class="editable-cell" [hidden]="editId === data.id" (click)="startEdit(data.id)">
{{ data.name }}
</div>
<input [hidden]="editId !== data.id" type="text" nz-input [(ngModel)]="data.name" (blur)="stopEdit()" />
</td>
<td>{{ data.age }}</td>
<td>{{ data.address }}</td>
<td>
<a nz-popconfirm nzPopconfirmTitle="Sure to delete?" (nzOnConfirm)="deleteRow(data.id)">Delete</a>
</td>
</tr>
</tbody>
</nz-table>
`,styles: [
`
.editable-cell {
position: relative;
padding: 5px 12px;
cursor: pointer;
}
.editable-row:hover .editable-cell {
border: 1px solid #d9d9d9;
border-radius: 4px;
padding: 4px 11px;
}
`
]
})
export class NzDemoTableEditCellComponent implements OnInit {
i = 0;
editId: string | null = null;
listofData: ItemData[] = [];
startEdit(id: string): void {
this.editId = id;
}
stopEdit(): void {
this.editId = null;
}
addRow(): void {
this.listofData = [
...this.listofData,{
id: `${this.i}`,name: `Edward King ${this.i}`,age: '32',address: `London,Park Lane no. ${this.i}`
}
];
this.i++;
}
deleteRow(id: string): void {
this.listofData = this.listofData.filter(d => d.id !== id);
}
ngOnInit(): void {
this.addRow();
this.addRow();
}
}
那个分页有什么问题?
解决方法
我想你也应该使用 [pageSize]
和 [pageIndex]
道具,当你使用 [nzTotal]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。