Angular2 - 具有表单控件名称的可编辑网格

Question

我们需要可编辑的网格，我们决定使用primeng datatable。

我们正在使用以下代码来实现此目的，但它没有按预期工作。我认为问题出在表单控制名称上，但我不确定问题出在哪里。

<p-dataTable [value]="lstchecklistModel" [responsive]="true" [editable]="true" [style]="{'margin-top':'50px'}">                    
<p-column field="labelName" header="Checklist"></p-column>                    
<p-column field="required" header="Required" [editable]="true" [style]="{'overflow':'visible'}">
<ng-template let-col let-car="rowData" pTemplate="editor">
<p-dropdown formControlName="required" dataKey="label" [options]="RequiredValues" [autoWidth]="false" [style]="{'width':'100%'}" required="true"></p-dropdown>
</ng-template>
</p-column>
<p-column field="required" header="Mail Received Date"></p-column>
<p-column field="received" header="Recived?"></p-column>
<p-column field="receivedDate" header="Mail Received Date"></p-column>
<p-column field="mailReceivedDate" header="Mail Received Date"></p-column>
<p-column field="updatedBy" header="Updated By"></p-column>
</p-dataTable>

谢谢 聚 苯胺

Answer 1

我能够通过以下更改实现这一点。

<p-dataTable [value]="lstchecklistModel" [responsive]="true" [editable]="true" [style]="{'margin-top':'50px'}">
<p-column field="labelName" header="Checklist" [style]="{'overflow':'visible', 'width':'300px'}"></p-column>
<p-column field="required" header="Required?" [editable]="true" [style]="{'overflow':'visible', 'width':'100px'}">
<ng-template let-col let-row="rowData" pTemplate="editor">
<p-dropdown [(ngModel)]="row[col.field]" [ngModelOptions]="{standalone: true}" [options]="RequiredValues" [autoWidth]="false" [style]="{'width':'100%'}"></p-dropdown>
</ng-template>
</p-column>
<p-column field="received" header="Recived?" [editable]="true" [style]="{'overflow':'visible', 'width':'100px'}">
<ng-template let-col let-row="rowData" pTemplate="editor">
<p-dropdown [(ngModel)]="row[col.field]" [ngModelOptions]="{standalone: true}" dataKey="label" [options]="RequiredValues" [autoWidth]="false" [style]="{'width':'100%'}" ></p-dropdown>
</ng-template>
</p-column>
<p-column field="receivedDate" header="Mail Received Date"></p-column>
<p-column field="mailReceivedDate" header="Mail Received Date"></p-column>
<p-column field="updatedBy" header="Updated By"></p-column>
</p-dataTable>