Question

我们要求拥有可编辑的网格，我们决定使用primeng数据表。

我们使用以下代码来实现此目的，但是它没有按预期工作。我认为问题在于formControlName，但我不确定是什么问题。

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

带有formControlName的Angular2-可编辑网格

1 个答案: