在 primeNG 数据表中未选中复选框答案

【问题标题】：Checkbox not getting selected in primeNG datatable在 primeNG 数据表中未选中复选框
【发布时间】：2017-09-18 18:00:21
【问题描述】：

我正在使用 Angular 2 构建一个应用程序。我们有一个要求，我们需要在表格中显示数据，并过滤每列和分页。除此之外，我们还需要每行上的复选框，以便用户可以选择多行来执行某些操作。为此，我使用 PrimeNG 数据表，但在复选框选择模式下使用该表时遇到问题。当我单击复选框时，该行被选中，但未选中该复选框。我正在粘贴下面的代码。

 <p-dataTable [value]="devices" [(selection)]="selectedDevices">
    <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
    <p-column field="macAddress" header="STB"></p-column>
    <p-column field="userId" header="User ID"></p-column>
    <p-column field="rackNumber" header="Rack No"></p-column>
    <p-column field="modelNumber" header="Model"></p-column>
    <p-column field="environment" header="Environment"></p-column>
    <p-column field="uiBuild" header="UI Build"></p-column>
    <footer>
        <ul>
            <li *ngFor="let device of selectedDevices" style="text-align: left">{{device.macAddress + ' - ' + device.userId + ' - ' + device.rackNumber + ' - ' + device.modelNumber}}</li>
        </ul>
    </footer>
</p-dataTable>

谁能告诉我我在这里缺少什么？

【问题讨论】：

确保你在 index.html 中有以下内容 ' '

标签： angular primeng

【解决方案1】：

试试这个，看看有没有帮助

<p-dataTable [value]="devices" selectionMode="multiple" [(selection)]="selectedDevices">
    <p-column field="macAddress" header="STB"></p-column>
    <p-column field="userId" header="User ID"></p-column>
    <p-column field="rackNumber" header="Rack No"></p-column>
    <p-column field="modelNumber" header="Model"></p-column>
    <p-column field="environment" header="Environment"></p-column>
    <p-column field="uiBuild" header="UI Build"></p-column>
    <footer>
        <ul>
            <li *ngFor="let device of selectedDevices" style="text-align: left">{{device.macAddress + ' - ' + device.userId + ' - ' + device.rackNumber + ' - ' + device.modelNumber}}</li>
        </ul>
    </footer>
</p-dataTable>

selectionMode 需要为 p-dataTable 而不是 p-column 指定。

PrimeNg DataTable 会自动为选择框添加列，因此您不必这样做。

【讨论】：

selectionMode="multiple" 允许在每一行中使用复选框。没有错

【解决方案2】：

您可能只是忘记在 p-dataTable 中添加 dataKey="macAddress" ：

 <p-dataTable [value]="devices" [(selection)]="selectedDevices"  dataKey="macAddress">
    <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
    <p-column field="macAddress" header="STB"></p-column>
    <p-column field="userId" header="User ID"></p-column>
    <p-column field="rackNumber" header="Rack No"></p-column>
    <p-column field="modelNumber" header="Model"></p-column>
    <p-column field="environment" header="Environment"></p-column>
    <p-column field="uiBuild" header="UI Build"></p-column>
    <footer>
        <ul>
            <li *ngFor="let device of selectedDevices" style="text-align: left">{{device.macAddress + ' - ' + device.userId + ' - ' + device.rackNumber + ' - ' + device.modelNumber}}</li>
        </ul>
    </footer>
</p-dataTable>

【讨论】：