代码之家  ›  专栏  ›  技术社区  ›  Devmix

如何从表中删除所选内容?

  •  0
  • Devmix  · 技术社区  · 6 年前

    我已经为此挣扎了一段时间了。我有一个简单的表,当我选择一行时,它得到 挑选出来的 . 但是我想给我的按钮添加一个功能( 删除所选内容 )所以当我单击它时,我想从行中删除所选内容。有人能告诉我我错过了什么吗?提前多谢!

    以下是我的代码: LIVE DEMO

     <p-table [value]="tableData" selectionMode="single" metaKeySelection = "true">
    <ng-template pTemplate="header">
        <tr>
            <th>Company</th>
            <th>First Name</th>
            <th>Email</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
        <tr [pSelectableRow]="rowData">
            <td>{{rowData.first_name}}</td>
            <td>{{rowData.last_name}}</td>
            <td>{{rowData.email}}</td>
        </tr>
    </ng-template>
    </p-table>
    
    <button (click)= "removeSelection()">Remove Selection</button>
    
    1 回复  |  直到 6 年前
        1
  •  0
  •   Juan    6 年前

    您必须添加 [(selection)]="selectedRow" p-table 要将所选行绑定到已定义的变量,请执行以下操作:

    <p-table [value]="tableData" selectionMode="single" metaKeySelection = "true" [(selection)]="selectedRow">
    <ng-template pTemplate="header">
        <tr>
            <th>Company</th>
            <th>First Name</th>
            <th>Email</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
        <tr [pSelectableRow]="rowData">
            <td>{{rowData.first_name}}</td>
            <td>{{rowData.last_name}}</td>
            <td>{{rowData.email}}</td>
        </tr>
    </ng-template>
    </p-table>
    
    <button (click)= "removeSelection()">Remove Selection</button>
    

    并添加 this.selectedRow = null; removeSelection() 方法:

    removeSelection() {
        this.selectedRow = null;
    }