Question

我有这张桌子

<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>

现在我想创建一个删除按钮，该按钮应该从表中删除已检查的行。

<button pButton type="button" label="Delete" (click)="onclick()"></button>

我将如何继续，我知道我必须在component.ts中为

创建一个函数

onclick()

我的表也正在创建为

example = [];

ngOnInit() {
    this.example.push({
        a: 'e1',
        b: 'e2',
        c: 'e3'
    });
};

但是如何删除已检查的行。

由于

Answer 1

首先更改示例数组的结构，然后准备选择数组：

example = [
    {field: 'a', header: 'e1'},
    {field: 'b', header: 'e2'},
    {field: 'c', header: 'e3'},
];

selectedItems = [];

然后生成像（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);
    });
}

那应该这样做。

从Angular中的表中删除已选中的行

1 个答案: