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

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列指定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>