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