PrimeNG：可编辑的dataTable列

Question

我有一个数据表，我正在尝试使列careOfferingSpaceAvailableId可编辑，然后一旦用户编辑我想在数据库中更新该行列。

1。）但由于某种原因，UI不会将此列呈现为可编辑

2。）我有一个“下一步”按钮，一旦点击，我不知道如何获取用户输入可用空间可用列的值。我需要获取每个spaceAvailable输入及其careOfferingSpaceAvailableId以更新到数据库

 <p-dataTable [value]="this.careOfferingSpaceList" [editable]="true" selectionMode="single" rows="25" [responsive]="true"
      [loading]="false">
      <p-column field="id" [editable]="true" hidden="true"></p-column>
      <p-column field="weekNo" [editable]="true" header="Offerings">
        <ng-template let-careOfferingSpace="rowData" pTemplate="body">
          <span> Week {{careOfferingSpace.weekNo}} </span>
        </ng-template>
      </p-column>
      <p-column field="startDate" [editable]="true" header="Date">
        <ng-template let-careOfferingSpace="rowData" pTemplate="body">
          <span> {{careOfferingSpace.startDate}} - {{careOfferingSpace.endDate}} </span>
        </ng-template>
      </p-column>
      <p-column field="careOfferingSpaceAvailableId" hidden="true" header="Space Available Id" [editable]="true">
      </p-column>
      <p-column field="spaceAvailable" header="Spaces Available" [editable]="true">
      </p-column>

    </p-dataTable>

即使我点击空间可用列我也无法输入数据

Answer 1

1。）您无法编辑您的单元格，因为您在表格中添加了selectionMode属性，因此如果单击某个单元格，它将选择该单元格并且不会选择该单元格。“ / p>

此外，仅为了您的信息，this在您的HTML中无用，因此您可以替换

[value]="this.careOfferingSpaceList"

带

[value]="careOfferingSpaceList"

2。）当您单击“下一步”按钮时，您只需浏览careOfferingSpaceList对象即可获取所需内容：

nextAction() {
     this.careOfferingSpaceList.forEach(function(careOfferingSpace) {
       console.log('careOfferingSpaceAvailableId-spaceAvailable : ' + careOfferingSpace.careOfferingSpaceAvailableId + '-' + careOfferingSpace.spaceAvailable);
     })
}

见工作Plunker