Question

我正在使用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>

有人可以告诉我，我在这里失踪了什么吗？

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

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

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

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

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

2 个答案: