正在从 Angular 中的 table 中删除选中的行
Deleting checked row(s) from a table in Angular
我有这个table
<p-dataTable [value]="example">
<p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
<p-column field="a" header="column 1"></p-column>
<p-column field="b" header="column 2"></p-column>
<p-column field="c" header="column 3"></p-column>
</p-dataTable>
我现在想制作一个删除按钮,用于删除 table 中选中的行。
<button pButton type="button" label="Delete" (click)="onclick()"></button>
然后我将如何进行,我知道我必须在 component.ts
中为
创建一个函数
onclick()
我的 table 也被创建为
example = [];
ngOnInit() {
this.example.push({
a: 'e1',
b: 'e2',
c: 'e3'
});
};
但是里面怎么删除勾选的行呢
谢谢
首先改变示例数组的结构,让我们准备一个选择数组:
example = [
{field: 'a', header: 'e1'},
{field: 'b', header: 'e2'},
{field: 'c', header: 'e3'},
];
selectedItems = [];
然后生成 table 和这样的列 (DRY):
<p-dataTable [value]="example" selectionMode="multiple" [(selection)]="selectedItems">
<p-column *ngFor="let item of example" [field]="item.field" [header]="item.header"></p-column>
</p-dataTable>
<button (click)="deleteSelected()">Delete the bastards!</button>
然后让他们消失:
deleteSelected(){
selectedItems.forEach(function(item) {
const index = example.indexOf(item);
example.splice(index, 1);
});
}
这样就可以了。
我有这个table
<p-dataTable [value]="example">
<p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
<p-column field="a" header="column 1"></p-column>
<p-column field="b" header="column 2"></p-column>
<p-column field="c" header="column 3"></p-column>
</p-dataTable>
我现在想制作一个删除按钮,用于删除 table 中选中的行。
<button pButton type="button" label="Delete" (click)="onclick()"></button>
然后我将如何进行,我知道我必须在 component.ts
中为
onclick()
我的 table 也被创建为
example = [];
ngOnInit() {
this.example.push({
a: 'e1',
b: 'e2',
c: 'e3'
});
};
但是里面怎么删除勾选的行呢
谢谢
首先改变示例数组的结构,让我们准备一个选择数组:
example = [
{field: 'a', header: 'e1'},
{field: 'b', header: 'e2'},
{field: 'c', header: 'e3'},
];
selectedItems = [];
然后生成 table 和这样的列 (DRY):
<p-dataTable [value]="example" selectionMode="multiple" [(selection)]="selectedItems">
<p-column *ngFor="let item of example" [field]="item.field" [header]="item.header"></p-column>
</p-dataTable>
<button (click)="deleteSelected()">Delete the bastards!</button>
然后让他们消失:
deleteSelected(){
selectedItems.forEach(function(item) {
const index = example.indexOf(item);
example.splice(index, 1);
});
}
这样就可以了。